从鼠标位置关闭Three.js Raycast

Question

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

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

这是帮助器的代码和光线投射的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 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

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

Answer 1

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

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

Answer 2

奇怪的是，当将透视相机附近参数从 0.1 更改为 1 时，问题似乎自行解决了

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

到：

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

我仍然不能 100% 确定为什么这可以解决问题，但它似乎有效。

编辑：将 FOV 从 45 更改为 60 消除了更改近摄像机参数后仍然出现的光线投射中的轻微失真。