我需要在WebGL中实现相当于"谷歌地图"风格的缩放效果.具体来说,我有一个简单的二维场景,总是垂直于相机.当用户点击场景时,摄像机应缩放到位于点击上方的位置,但更接近二维场景.
例如,看到这个实现场景但没有缩放的jsfiddle:
如果您有一个支持WebGL的浏览器,您应该看到在Z轴上以-7渲染的三角形和正方形(2维).我已经放置了一个占位符handleMouseUp()事件处理程序来记录任何点击事件,但我有点迷失了如何将click事件给出的坐标转换为相机的新位置(或者我猜相当于一个新的位置)查看矩阵).
(jsfiddle基于learningwebgl.com的教程1,并使用glMatrix http://code.google.com/p/glmatrix/库进行矩阵操作.请记住,这是WebGL,类似于OpenGL ES,并且无法使用glu*功能.)
bra*_*jam 10
我在这个jsfiddle中写过一些应该对你有帮助的东西.
http://jsfiddle.net/zttnZ/174/
(或https://codepen.io/brainjam/pen/gBZyGm)
只需单击WebGL窗口即可放大鼠标指向的位置.
基本思想是WebGL窗口中的一个点是通过使用投影矩阵pMatrix和视图矩阵从三维空间投影得到的(视图矩阵取决于摄像机的位置和它所在的方向).这些矩阵的组成pvMatrix在代码中命名.
如果您希望从窗口反向转换回三个空间,则必须使用剪切空间坐标(x,y,z)并使用反转将其"取消投影"回3D pvMatrix.在剪辑空间中,坐标在[-1,1]范围内,z坐标为深度.
在OpenGL世界中,这些转换是在gluProject()和gluUnproject()(您可以通过Google获取更多信息和源代码)中实现的.
在jsfiddle示例中,我们计算剪辑空间中的(x,y)坐标,然后针对两个不同的z值取消投影(x,y,z).从那里我们在3D空间中得到两个映射到(x,y)的点,我们可以推断出方向向量.然后我们可以朝那个方向移动相机以获得缩放效果.
在代码中,摄像机位置是eye向量的否定.
此示例显示如何沿您单击的方向移动摄像机.如果你想真正移动到场景中的特定对象,你必须实现像对象选择这样的东西,这是一个不同的鱼.我给出的例子是不知道场景中的对象.
| 归档时间： |
|
| 查看次数： |
6878 次 |
| 最近记录： |