Three.js raycast produce una matriz de intersecciones vacias
Estoy tratando de detectar cuándo el usuario ha hecho clic en un cubo específico en mi escena 3D. He visto algunas preguntas similares, pero ninguna parece tener el mismo problema que yo.
Tengo una matriz de cubos en 3D que se llena y se muestra bien, pero cuando se llama a mi función de mouse hacia abajo, la matriz de intersección siempre está vacía. No puedo ver lo que está mal y agradecería cualquier ayuda.
Mi renderizador está configurado de esta manera:
function setupRenderer()
{
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex( 0xEEEEEE, 1 );
renderer.domElement.addEventListener( 'mousedown', onDocumentMouseMove, false );
$('body').append(renderer.domElement);
}
y el manejador de eventos es:
function onDocumentMouseDown(event)
{
console.log("mouse clicked!");
event.preventDefault();
if(event.target == renderer.domElement)
{
var mouseX = (event.clientX / window.innerWidth)*2-1;
var mouseY = -(event.clientY /window.innerHeight)*2+1;
var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.subSelf(camera.position).normalize());
var intersects = raycaster.intersectObjects(cubes);
console.log("intersects.length: " + intersects.length);
if ( intersects.length > 0 ) {
console.log("intersected objects");
/* do stuff */
}
}
}
Puedes ver el proyecto actual en acción enhttp://kev-adsett.co.uk/experiments/three.js/experiment1/