4、threejs的光线投射Raycaster原理记录

1、Raycaster类

这个类设计用于鼠标去获取在3D世界被鼠标选中的一些物体

Raycaster( origin, direction, near, far )

origin — 射线的起点向量。

direction — 射线的方向向量,应该归一标准化。

near — 所有返回的结果应该比 near 远。Near不能为负,默认值为0。

far — 所有返回的结果应该比 far 近。Far 不能小于 near,默认值为无穷大。

鼠标在屏幕上点击的时候,得到二维坐标p(x, y),再加上深度坐标的范围(0, 1), 就可以形成两个三位坐标A(x1, y1, 0), B(x2, y, 1), 由于它们的Z轴坐标是0和1,则转变到投影坐标系的话,一定分别是前剪切平面上的点和后剪切平面上的点,也就是说,在投影坐标系中,A点一定在能看见的所有模型的最前面,B点一定在能看见的所有的模型的最后边,将AB点连成线,AB线穿过的物体就是被点击的物体。而 Three.js提供一个射线类Raycasting来拾取场景里面的物体。更方便的使用鼠标来操作3D场景。

在实际代码中我们组成射线的两个点是摄像机所在视点与屏幕上点击的点连接而成的射线

即A(X1,Y1,Znear),B(X2,Y2,Zfar),X1 Y1 X2 Y2是鼠标点击的二维坐标要转换成三维空间上的坐标,并单位化,Z坐标取值是(0,1)。

2、鼠标点击屏幕的坐标如何转换成空间的坐标?

mouse.x = (e.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

推导过程:

(本质上是将以(0,0)为原点的坐标转成以(window.innerWidth/2,Window.Height/2)为中心的坐标,简单的坐标原点变换问题)

设A点为点击点(x1,y1),x1=e.clintX, y1=e.clientY

设A点在世界坐标中的坐标值为B(x2,y2);

由于A点的坐标值的原点是以屏幕左上角为(0,0);

我们可以计算可得以屏幕中心为原点的B'值

x2' = x1 - innerWidth/2 y2' = innerHeight/2 - y1

又由于在世界坐标的范围是[-1,1],要得到正确的B值我们必须要将坐标标准化

x2 = (x1 -innerWidth/2)/(innerwidth/2) = (x1/innerWidth)*2-1

同理得 y2 = -(y1/innerHeight)*2 +1

参考:https://www.cnblogs.com/smedas/p/12445201.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容