three.js射线：THREE.Raycaster实现鼠标选取几何图元

最新推荐文章于 2024-08-12 15:30:38 发布

置顶

coder_路远

最新推荐文章于 2024-08-12 15:30:38 发布

阅读量2.6k

点赞数 1

分类专栏： Three.js入门 Three.js开发文章标签： THREE.Raycaster three.js选取三角面 three.js射线 three.js捕捉物体

本文链接：https://blog.csdn.net/qq_37338983/article/details/89522483

版权

这篇博客介绍了如何使用THREE.Raycaster在three.js中实现鼠标选取几何图元的功能。通过将鼠标点击的2D屏幕坐标转换为3D世界坐标，利用射线进行三角面的选取。文中提供了实现效果的示例，并分享了具体的代码实现。

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

学习交流欢迎加群：789723098，博主会将一些demo整理共享

一、介绍

有时候我们在对三角网格模型进行操作的时候可能会需要对三角面进行选择，而实现这一功能最方便快捷的方法就是利用THREE.Raycaster创建射线来实现,在这边就不详细介绍射线的原理了，如果有兴趣的同学可以自行百度查询，有很多介绍射线的文章。Raycaster类的使用方法可以在官方文档中查询到：Raycaster使用方法，如下图所示；

利用射线选取三角面最直观的实现就是利用鼠标点击，对鼠标点击的屏幕坐标位置的三角面进行选取，在这里屏幕坐标是2D的，需要先将屏幕坐标转换为3D坐标(世界坐标系)，具体方法如下：

let mouse = new THREE.Vector2();//创建2D坐标
let raycaster = new THREE.Raycaster();//创建射线

//将m屏幕坐标转换成3D坐标
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);