//监听鼠标点击事件document.addEventListener('click',function(event){//创建一个射线投射器varraycaster=newTHREE.Raycaster();//鼠标位置varmouse=newTHREE.V

  监听事件ThreeDom.current.addEventListener('mousemove',mousemoveFunc,false);监听方法constmousemoveFunc=(event)=>{event.preventDefault();//计算鼠标在屏幕上的位置constmouse=newTHREE.Vector2();mouse.x=(event.clientX

参数解释GraphicRaycaster——射线检测IgnoreReversedGraphics是否忽略反方向图形，勾选此选项时反转180°的图形将不接受射线检测，否则正反面都接受BlockingObjects屏蔽指定对象类型，None都不屏蔽TwoD屏蔽具有2D碰撞体的2D物理对象，ThreeD屏蔽具有3D碰撞体的3D物

图例图1-1拾取步骤先把鼠标点击的（X,Y)从屏幕坐标系转成webgl坐标系。然后再把webgl坐标系通过投影逆变换转成投影坐标系，得到（X,Y)在投影坐标系下的值(Xw,Yw,Zw)。把(Xw,Yw,Zw)减去相机的坐标得到射线的方向向量（起点是相机的坐标，知道起点和方向就可以得到一条无限长的射线）。

本文目录前言一、简要介绍1.1定义与原理1.2构造器1.3常用属性1.4常用方法二、代码准备及效果2.1演示代码准备2.2效果三、创建射线Raycaster及效果3.1代码3.2效果四、完整代码前言Three.js中的光线投射（Raycaster）是一个功能强大的类，用于在三维场景中执行射

这里写目录标题前言一、前置准备1.1代码1.2效果二、添加交互事件2.1代码2.2效果三、完整代码前言基于上篇文章Threejs之光线投射Raycaster我们知道了光线投射的基础用法，在本届我们将使用光线投射进行鼠标交互事件一、前置准备1.1代码<!DOCTYPEhtml><ht