我需要在WebGL中实现相当于“Google Maps”风格的缩放效果。具体来说,我有一个简单的二维场景,它总是垂直于摄像头。当用户点击场景时,摄像头应该缩放到点击位置上方的位置,但更接近二维场景。
例如,请看这个jsfiddle,它实现了场景,但没有缩放:
http://jsfiddle.net/JqBs8/4/
如果你有一个支持WebGL的浏览器,你应该看到一个三角形和一个正方形(二维)呈现在Z轴上的-7。我已经放了一个占位符handleMouseUp()事件处理程序来记录任何点击事件,但我有点不知道如何将点击事件给出的坐标转换到摄像头的新位置(或者我猜相当于一个新的视图矩阵)。
(The jsfiddle基于www.example.com上的教程1learningwebgl.com,并使用glMatrix http://code.google.com/p/glmatrix/库进行矩阵运算。请记住,这是WebGL,类似于OpenGL ES,无法访问glu* 函数。)
2条答案
按热度按时间7d7tgy0s1#
我在这个jsfiddle中写了一些东西,应该会对您有所帮助。
http://jsfiddle.net/hedzys6r/
(or https://codepen.io/brainjam/pen/gBZyGm)
只需单击WebGL窗口即可放大到鼠标所指的位置。
基本思想是WebGL窗口中的一个点是通过使用投影矩阵
pMatrix
和视图矩阵(视图矩阵取决于摄像机的位置和观看方向)从三维空间投影得到的。这些矩阵的组合在代码中命名为pvMatrix
。如果你想要从窗口到三维空间的反向转换,你必须获取一个剪辑空间坐标(x,y,z),并使用
pvMatrix
的逆函数将其“取消投影”回3D。在剪辑空间中,坐标在[-1,1]范围内,z
坐标是深度。在OpenGL世界中,这些转换是在
gluProject()
和gluUnproject()
中实现的(您可以在Google上获取更多信息和源代码)。在jsfiddle的例子中,我们计算剪切空间中的(x,y)坐标,然后对两个不同的z值取消投影(x,y,z),由此我们得到3D空间中Map到(x,y)上的两个点,我们可以推断出一个方向向量,然后我们可以在该方向上移动相机以获得缩放效果。
在代码中,相机位置位于
eye
向量的负向量处。这个例子向你展示了如何在你点击的方向移动相机。如果你想真正的移向场景中的特定物体,你必须实现像物体选择这样的东西,这是另一回事。我给出的例子是不知 dojo 景中的物体的。
pobjuy322#
这确实是brainjam答案的一部分,但为了防止jsfidle消失,我想确保代码被存档。
整个JS...