如何解决Three.js-如何为Raycaster和Intersection更新对象位置
我有这个glTF人脸模型,可以成功地“观察”鼠标的位置。我在整个窗口上都进行了跟踪,甚至在画布外部也是如此(这是必需的)。由于画布不会全屏显示。
现在,我将遇到一个问题,即面部方向与鼠标位置不对齐。例如。当我将画布放置在右侧的一列中时,会发生此问题,该对象认为画布仍源自窗口的左上角。我正在使用以下代码来跟踪鼠标的移动:
var plane = new THREE.Plane(new THREE.Vector3(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);
}
我真的不知道如何解决这个问题。如何更新相对于屏幕的新对象位置,以便raycaster和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使其成为可能:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。