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

Question

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

我觉得这一定是一个很常见的问题，但我似乎无法在我的谷歌中找到解决方案。必须有某种方法将 3D 空间的当前视图投影到 2D，以便您可以将 2D 空间中的每个点映射到 3D 空间中的相关点。我希望用户能够将鼠标悬停在板上的空间上，并让该点改变颜色。

Answer 1

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

我有一个取消投影的示例，位于 jax/camera.js#L568< /a> -- 但你仍然需要实现射线/三角形相交。我在 jax/triangle.js#L113。

然而，有一个更简单且（通常）更快的替代方案，称为“挑选”。如果您想要选择整个对象（例如，棋子）并且不关心鼠标实际单击的位置，请使用此选项。 WebGL 的方法是将整个场景以各种蓝色色调（蓝色是关键，而红色和绿色用于场景中对象的唯一 ID）渲染到纹理，然后从那个纹理。将 RGB 解码为对象的 ID 将得到被单击的对象。再次，我已经实现了这个，它可以在 jax/world.js 中找到。 #L82。 （另请参见第 146、162、175 行。）

两种方法各有利弊（此处讨论< /a> 以及之后的一些评论），您需要找出哪种方法最能满足您的需求。对于巨大的场景，选取速度较慢，但​​纯 JS 中的非投影速度非常慢（因为 JS 本身并不是那么快），所以我最好的建议是尝试两者。

仅供参考，您还可以查看 GLU 项目和 unproject 代码，我的代码松散地基于它：http://www.opengl。 org/wiki/GluProject_and_gluUnProject_code

Answer 2

我目前正在解决这个问题 - 我正在采取的方法是

1. 渲染对象以选取每个具有唯一颜色的缓冲区
2. 读取缓冲区像素，映射回选取的对象
3. 渲染选取的对象以使用每个像素颜色的 Z 函数进行缓冲深度
4. 读取缓冲区像素，映射回 Z 深度
5. 我们已选取对象并为选取坐标近似 Z

Answer 3

从一根线中崇拜出来。
不确定 (x,y,z)，但您可以使用 canvas(x,y)

getBoundingClientRect()

function getCanvasCoord(){
  var mx = event.clientX;
  var my = event.clientY;
  var canvas = document.getElementById('canvasId');
  var rect = canvas.getBoundingClientRect();// check if your browser supports this
  mx = mx - rect.left;
  my = my - rect.top;
  return {x: mx , y: my};
}