three.js解决非全屏射线位置错误问题
目录
three.js解决非全屏射线位置错误问题
2025.03.14今天我学习了如何对非全屏的模型实现点击到对应物体的位置，模型如下：
当我的模型是放在一个div里面的时候，要把window.innerWidth 和window.innerHeight属性全部改成对应的div宽高，
点击物体方法如下：
function onClick(event) {
event.preventDefault();
let mouse = new THREE.Vector2();
let canvas = proxy.$refs.content;//获取div元素，我这边是vue3写法，proxy = this
let getBoundingClientRect = canvas.getBoundingClientRect();//获取点击物体的位置
let x = ((event.clientX - getBoundingClientRect.left) / getBoundingClientRect.width) * 2 - 1;// 标准设备横坐标
let y = -((event.clientY - getBoundingClientRect.top) / getBoundingClientRect.height) * 2 + 1;// 标准设备纵坐标
let standardVector = new THREE.Vector3(x, y, 1);
let worldVector = standardVector.unproject(camera);
let ray = worldVector.sub(camera.position).normalize();
let rayCaster = new THREE.Raycaster(camera.position, ray);
rayCaster.params.Line.threshold = 0.01;//增加精确度
let intersects = rayCaster.intersectObjects(scene.children, true);
rayCaster.setFromCamera(mouse, camera);
console.log(intersects)
}最主要的是getBoundingClientRect();方法用于获取点击物体的位置，找到对应的偏移位置，就可以计算拿到该物体的精确位置。