Javascript Three.js-如何更新光线投射器和交点的对象位置

我有一个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);
     }

我真的不知道如何处理这个问题。如何更新相对于屏幕的新对象位置，以便光线投射器和交点根据其位置对齐面方向

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使之成为可能：）

非常感谢！