如何从鼠标单击坐标获取WebGL 3d空间中的对象
我正在用WebGL构建桌游。该板可以旋转/缩放。我需要一种将对画布元素（x，y）的单击转换为3D空间（x，y，z）中相关点的方法。最终结果是我想知道（x，y，z）坐标，该坐标包含接触最接近用户的对象的点。例如，用户单击一块，您想象一条射线穿过3D空间同时穿过该块和游戏板，但是我希望该块的（x，y，z）坐标位于原点感动。
我觉得这肯定是一个非常普遍的问题，但是我似乎无法在Google中找到解决方案。必须有某种方法将3D空间的当前视图投影到2D中，以便可以将2D空间中的每个点映射到3D空间中的相关点。我希望用户能够将鼠标悬停在板上的某个空间上，并使专色变色。
回答：
您正在寻找一个unproject函数，该函数将屏幕坐标转换为从摄像机位置到3D世界的光线。然后，您必须执行光线/三角形相交测试，以找到最接近相机且与光线相交的三角形。
我在jax /camera.js＃L568上有一个非投影示例-但您仍然需要实现ray/triangle相交。我在jax/triangle.js＃L113有一个实现。
但是有一个更简单（通常）更快的替代方法，称为“挑选”。如果要选择整个对象（例如，一个棋子），并且不关心鼠标实际单击的位置，请使用此选项。WebGL的方法是将整个场景以各种蓝色阴影（蓝色是关键，而红色和绿色用于场景中对象的唯一ID）渲染为纹理，然后从中读取像素那种质地。将RGB解码为对象的ID将为您提供被单击的对象。同样，我已经实现了它，并且可以在jax/world.js＃L82上找到。
两种方法都各有利弊（在这里和后面的一些评论中讨论），您需要确定哪种方法最适合您的需求。在大型场景中选择速度较慢，但是在纯JS中进行投影非常慢（因为JS本身并不是那么快），所以我的最佳建议是尝试两者。
以上是 如何从鼠标单击坐标获取WebGL 3d空间中的对象 的全部内容， 来源链接： utcz.com/qa/425688.html
