three.js解决非全屏射线位置错误问题

最新推荐文章于 2026-06-15 15:44:49 发布

原创最新推荐文章于 2026-06-15 15:44:49 发布 · 304 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#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();方法用于获取点击物体的位置，找到对应的偏移位置，就可以计算拿到该物体的精确位置。