threejs对象拾取

最新推荐文章于 2025-06-30 10:46:35 发布

目尽地平线

最新推荐文章于 2025-06-30 10:46:35 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： threejs three.js基础教程文章标签： threejs

本文链接：https://blog.youkuaiyun.com/ruangong1203/article/details/60476621

本文介绍了在threejs中如何实现对象拾取，通过Raycaster对象发射射线，找到鼠标点击位置对应的图形对象。详细解析了鼠标点击坐标转换为threejs标准坐标的推导过程，并建议在屏幕宽度不等于window.innerWidth时重新进行推导。同时，推荐查阅Raycaster对象的官方文档以了解更多方法详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对象拾取

对象拾取也就是要获得鼠标事件发生位置的图形对象。在threejs中，是通过Raycaster 对象来拾取对象的，ray是射线，caster是投射器，从字面上即可理解其工作原理是：从某个方向发射一条射线，穿过鼠标所在的点，则这条射线经过的对象就是鼠标点击的对象。示例如下：

let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function pickupObjects(e){
   
   
         //将鼠标点击位置的屏幕坐标转成threejs中的标准坐标
          mouse.x = (e.clientX/window.innerWidth)*2 -1;
          mouse.y = -(e.clientY/window.innerHeight)*2 + 1;
          //从相机发射一条射线，经过鼠标点击位置