一尘不染

如何从鼠标单击坐标获取WebGL 3d空间中的对象

javascript

我正在用WebGL构建桌游。该板可以旋转/缩放。我需要一种将对画布元素(x,y)的单击转换为3D空间(x,y,z)中相关点的方法。最终结果是我想知道(x,y,z)坐标,该坐标包含接触最接近用户的对象的点。例如,用户单击一块,您想象一条射线穿过3D空间同时穿过该块和游戏板,但是我希望该块的(x,y,z)坐标位于原点感动。

我觉得这肯定是一个非常普遍的问题,但是我似乎无法在Google中找到解决方案。必须有某种方法将3D空间的当前视图投影到2D中,以便可以将2D空间中的每个点映射到3D空间中的相关点。我希望用户能够将鼠标悬停在板上的某个空间上,并使专色变色。


阅读 722

收藏
2020-05-01

共1个答案

一尘不染

您正在寻找一个unproject函数,该函数将屏幕坐标转换为从摄像机位置到3D世界的光线。然后,您必须执行光线/三角形相交测试,以找到最接近相机且与光线相交的三角形。

我在jax /camera.js#L568上有一个非投影示例-但您仍然需要实现ray/triangle相交。我在jax/triangle.js#L113有一个实现。

但是有一个更简单(通常)更快的替代方法,称为“挑选”。如果要选择整个对象(例如,一个棋子),并且不关心鼠标实际单击的位置,请使用此选项。WebGL的方法是将整个场景以各种蓝色阴影(蓝色是关键,而红色和绿色用于场景中对象的唯一ID)渲染为纹理,然后从中读取像素那种质地。将RGB解码为对象的ID将为您提供被单击的对象。同样,我已经实现了它,并且可以在jax/world.js#L82上找到。

两种方法都各有利弊(在这里和后面的一些评论中讨论),您需要确定哪种方法最适合您的需求。在大型场景中选择速度较慢,但​​是在纯JS中进行投影非常慢(因为JS本身并不是那么快),所以我的最佳建议是尝试两者。

2020-05-01