Three.js Raycast desactivado desde la position del mouse

Actualmente estoy comstackndo una aplicación en three.js junto con jQuery. Actualmente estoy emitiendo rayos y colocando un ayudante en el lugar donde golpea el raycast. Más o less estoy tratando de lograr esto .

Me las he arreglado para lograr esto, sin embargo, al mover las coorderadas de mis objects y mover la camera a la nueva location, mi raycast, o el ayudante al less, está apagado. Parece estar apagado alnetworkingedor de unos 30 píxeles, pero depende de cómo cambias el ángulo de la camera como puedes ver desde aquí

Aquí está el código para el asistente y el evento onMouseMove para raycasting.

// RAYCAST HELPER var geometry = new THREE.CylinderGeometry( 0, 5, 15, 3 ); // radius at top, radius at bottom, height, segments //geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -50, 0, 0 ) ); geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) ); helper = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({ color: 0xEB1515, ambient: 0xEB1515, wireframe: false }) ); scene.add( helper ); rays = true; function onMouseMove( event ) { //console.log("Mouse moved"); $( document ).ready(function() { if ( rays == true ) { cX = event.clientX - $( "#info" ).width() cY = event.clientY - $( "#topbar" ).height() mouseVector.x = 2 * ( cX / canvaswidth ) - 1; mouseVector.y = 1 - 2 * ( cY / canvasheight ); mouseVector.z = 1; var raycaster = projector.pickingRay( mouseVector.clone(), camera ); for (var i = 0; i < buildingsroofs.length; i++) { var intersects = raycaster.intersectObject( buildingsroofs[i]); // Toggle rotation bool for meshes that we clicked if ( intersects.length > 0 ) { console.log("Intersection"); helper.position.set( 0, 0, 0 ); helper.lookAt( intersects[ 0 ].face.normal ); helper.position.copy(intersects[0].point); } } } //End of overarching if loop }) } //End of onMouse function 

Curiosamente, tengo que trabajar aquí, pero estos objects tienen las coorderadas incorrectas de lo que busco. También puedes ver que estoy ajustando para la altura del div superior y del div lateral, por lo que no parece ser el problema como originalmente me imaginé.

Como todo lo demás es correcto, es mouseVector sus valores de clientX y (por ejemplo, clientX y clientY ) estén apagados en comparación con su canvas WebGL (por ejemplo, puede getlos de algún elemento que no sea el canvas).

La manera más fácil de verificar esto es colocar el mouse en la esquina superior izquierda de su canvas (debe ser (0, 0) y cerrar la position del mouse onclick para ver si sus valores están desactivados. Aplique lo mismo para la esquina inferior derecha , en comparación con el ancho y alto de su canvas, resolví un problema similar de esta manera. En mi caso, (cx, cy) eran (-10, -10) y esto fue suficiente para un error sustancial en el raycasting.

Por extraño que parezca, el problema pareció resolverse al cambiar la perspectiva de la camera cerca del parámetro de 0.1 a 1

 camera = new THREE.PerspectiveCamera(45, canvaswidth / canvasheight , 0.1, 10000 ); 

A:

 camera = new THREE.PerspectiveCamera(45, canvaswidth / canvasheight , 1, 10000 ); 

Todavía no estoy 100% seguro de por qué esto solucionó el problema, pero parece que funcionó.

Editar: Al cambiar el FOV de 45 a 60, se eliminó la distorsión menor en el raycasting que aún estaba ocurriendo después de cambiar el parámetro de la camera cercana.