javascript–从鼠标位置关闭Three.jsRaycast

我目前正在使用一些jQuery在three.js中构建一个应用程序.我目前正在进行光线投射,并在光线投射点击的位置放置一个助手.或多或少我试图达到this.

我已经设法实现了这一点,但是在移动物体的坐标并将相机移动到新位置时,我的光线投射或者至少是帮助器是关闭的.它看起来像大约30像素,但取决于您从here可以看到的更改摄像机角度

这是帮助器的代码和光线投射的onMouseMove事件.

// 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 onm ouseMove( 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 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 onm ouse function


有趣的是,我让它工作here,但这些对象的坐标与我所追求的坐标不一致.您还可以看到我正在调整顶部div和侧面div的高度,因此这似乎不是我最初想象的问题.

解决方法:

由于其他一切都是正确的,因此与WebGL画布相比,mouseVector x和y值(即clientX和clientY)很可能是关闭的(例如,您可能从画布以外的某些元素获取这些值).

最简单的检查方法是将鼠标放在画布的左上角(应该是(0,0)并在点击时注销鼠标位置以查看您的值是否已关闭.在右下角应用相同的内容检查你的画布宽度和高度.我用这种方式解决了类似的问题.在我的情况下,(cx,cy)是(-10,-10),这足以导致光线投射中的实质性错误.