Three.js - 如何更新 Raycaster 和 Intersection 的对象位置答案

【问题标题】：Three.js - How to update object position for Raycaster and IntersectionThree.js - 如何更新 Raycaster 和 Intersection 的对象位置
【发布时间】：2020-09-06 08:26:08
【问题描述】：

我有这个 glTF 人脸模型，它成功地“查看”了鼠标的位置。我在整个窗口上进行了跟踪，甚至在画布之外（这是必需的）。由于画布不会全屏。

现在我会遇到面部方向与鼠标位置不对齐的问题。例如。当我将画布放在右侧的一列中时，会发生此问题，对象认为画布仍然来自窗口的左上角。我正在使用此代码来跟踪鼠标移动：

var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), -10);
     var raycaster = new THREE.Raycaster();
     var mouse = new THREE.Vector2();
     var pointOfIntersection = new THREE.Vector3();
     document.addEventListener("mousemove", onMouseMove, false);

    function onMouseMove(event) {
       mouse.x = (event.clientX / canvas.clientWidth) * 2 - 1;
       mouse.y = - (event.clientY / canvas.clientHeight) * 2 + 1;
       raycaster.setFromCamera(mouse, camera);
       raycaster.ray.intersectPlane(plane, pointOfIntersection);
       scene.lookAt(pointOfIntersection);
     }

我真的不知道如何解决这个问题。如何更新相对于屏幕的新对象位置，以便光线投射器和 pointOfIntersection 将面部方向与它的位置相应地对齐？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

感谢 Mugen87 让这一切成为可能 :)

【讨论】：

非常感谢！