javascript - Three.js Raycast 从鼠标位置关闭

Question

我目前正在用 three.js 和一些 jQuery 构建一个应用程序。我目前正在光线转换并在光线转换的位置放置一个助手。我或多或少正在努力实现 this .

我已经设法实现了这一点，但是在移动我的对象的坐标并将相机移动到新位置时，我的光线转换或至少是助手关闭了。它似乎偏离了大约 30 像素，但取决于您改变相机 Angular ，如您从 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 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

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

Answer 1

由于其他一切都是正确的，您的 mouseVector x 和 y 值(即 clientX 和 clientY) 与您的 WebGL Canvas 相比最有可能关闭(例如，您可能从 Canvas 以外的其他元素获取这些。

检查这一点的最简单方法是将鼠标放在 Canvas 的左上角(应该是 (0, 0) 并在单击时注销鼠标位置以查看您的值是否关闭。对右下角应用相同的内容，检查 Canvas 的宽度和高度。我用这种方式解决了类似的问题。在我的例子中，(cx, cy) 是 (-10 , -10) 这足以导致光线转换中的重大错误。