鼠标射线拾取

合集 - ThreeJs(3)

1.场景初始化2024-09-23

2.鼠标射线拾取2024-09-23

3.后期-抗锯齿化（Fxaa,Smaa,Mmaa）2024-09-19

收起

图例

图1-1

拾取步骤

• 先把鼠标点击的（X,Y)从屏幕坐标系转成webgl坐标系。
• 然后再把webgl坐标系通过投影逆变换转成投影坐标系，得到（X,Y)在投影坐标系下的值(Xw,Yw,Zw)。
• 把(Xw,Yw,Zw)减去相机的坐标得到射线的方向向量（起点是相机的坐标，知道起点和方向就可以得到一条无限长的射线）。
• 射线先和检测物体的包围和求交。
• 把上一步检测相交的物体遍历每一个面，检测是否相交。
• 把相交的物体按照深度（Z）排序,并返回。

拾取代码

event.preventDefault();
const raycaster = new Three.Raycaster();
let intersects;
let mouse = new Three.Vector2();

const rect = this.target.dom.getBoundingClientRect()
const x = event.clientX;
const y = event.clientY;
const array = [(x - rect.left) / rect.width, (y - rect.top) / rect.height]

const point = new Three.Vector2().fromArray(array);

mouse.set((point.x * 2) - 1, - (point.y * 2) + 1)
raycaster.setFromCamera(mouse, this.target.camera);
//获取射线与场景的交点
intersects = raycaster.intersectObjects(this.target.scene.children); 
if (intersects.length > 0) {
 //自定义选中模型逻辑
}

参考文章：

• 作者：老人家233 链接：https://juejin.cn/post/6988013072686252046 来源：稀土掘金
• 图1-1 老人家233 链接：https://juejin.cn/post/6988013072686252046 来源：稀土掘金