threejs对象拾取

最新推荐文章于 2024-09-11 14:48:40 发布

目尽地平线

最新推荐文章于 2024-09-11 14:48:40 发布

阅读量1.3w

点赞数 2

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

本文链接：https://blog.csdn.net/ruangong1203/article/details/60476621

版权

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

摘要由CSDN通过智能技术生成

对象拾取

对象拾取也就是要获得鼠标事件发生位置的图形对象。在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;