我需要在 WebGL 中实现相当于“Google map ”样式的缩放效果。具体来说，我有一个简单的二维场景，它始终垂直于相机。当用户单击场景时，相机应缩放到单击上方但更接近二维场景的位置。
例如，请参阅这个 jsfiddle，它实现了场景但没有缩放:
如果您有启用 WebGL 的浏览器，您应该会看到在 Z 轴 -7 处渲染的三 Angular 形和正方形(二维)。我已经放入了一个占位符 handleMouseUp() 事件处理程序来记录任何单击事件，但我对如何将单击事件给出的坐标转换为相机的新位置(或者我猜相当于一个新位置)有点迷失 View 矩阵)。
(jsfiddle 基于learningwebgl.com 的教程 1，并使用 glMatrix http://code.google.com/p/glmatrix/ 库进行矩阵运算。请记住，这是 WebGL，与 OpenGL ES 类似，并且无法访问 glu* 函数.)
最佳答案
我在这个 jsfiddle 中写了一些应该对你有帮助的东西。
(或 https://codepen.io/brainjam/pen/gBZyGm )
只需单击 WebGL 窗口即可放大鼠标指向的位置。
基本思想是，WebGL 窗口中的一个点是通过使用投影矩阵 pMatrix 和 View 矩阵从 3 空间投影得到的( View 矩阵取决于相机的位置和位置)它所看的方向)。这些矩阵的组合在代码中被命名为pvMatrix。
如果您想要从窗口返回到三个空间的相反变换，则必须采用剪辑空间坐标 (x,y,z) 并使用 pvMatrix 的逆将其“取消投影”回 3D.在剪辑空间中，坐标的范围是 [-1,1]，z 坐标是深度。
在 OpenGL 世界中，这些转换在 gluProject() 和 gluUnproject() 中实现(您可以通过 Google 获取更多信息和源代码)。
在 jsfiddle 示例中，我们计算剪辑空间中的 (x,y) 坐标，然后针对两个不同的 z 值取消投影 (x,y,z)。由此我们得到 3D 空间中映射到 (x,y) 的两个点，并且我们可以推断出方向向量。然后我们可以向该方向移动相机以获得变焦效果。
在代码中，相机位置位于眼睛向量的负值处。
此示例向您展示如何按照您单击的方向移动相机。如果你想真正移向场景中的特定对象，你必须实现对象选择之类的东西，这是另一回事。我给出的示例不知道场景中的对象。
关于javascript - 单击可放大 WebGL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5613718/