【问题标题】:threejs : rotating panorama to look at camera directionthreejs:旋转全景图以查看相机方向
【发布时间】:2017-05-17 13:59:45
【问题描述】:
我有两个映射全景图像的球体。我想在 2 张具有淡入淡出效果的全景图之间进行平滑过渡。对于两个全景,我都设置了初始相机方向以获得最佳视图。
现在的问题是,如果用户正在查看第一个全景图中的某个摄像机角度,然后他单击某个按钮来切换全景图,我想提供淡入淡出效果并直接降落在另一个全景图的初始摄像机角度上。
但是由于两个全景都共享共同的相机,我无法使用相机来实现它,所以我设计了以下解决方案 -
image depicting problem
- 旋转目标球体,使其朝向所需的相机方向。
- 旋转目标球体,使其看向现有的相机方向。
- 淡出源球体。
- 相机看看新的 panos 相机方向。
- 将全景旋转回初始方向。
在这里我找不到旋转全景图来查看相机的公式。 (就像相机是静态的,全景旋转来达到类似的效果,就好像我们在移动相机一样)。
有人可以帮助找到相对于相机旋转全景(球体)的公式。
【问题讨论】:
标签:
three.js
360-panorama
【解决方案1】:
Matrix 是一个非常强大的解决旋转问题的工具。我做了一个简单的解释。
一开始,相机在左球的中心,面向初始视点,然后,相机面向另一个点,现在,相机的旋转已经改变,接下来,相机移动到右球的中心并保持它的方向。我们需要旋转正确的球体。如果 C 是我们要让相机面对的点,首先,我们将 A 旋转到 B,然后,我们将一个等于 C 的角度 θ 旋转到 A。
那么,该怎么做呢?我用的是矩阵,因为A是一个初始点,一个单位矩阵中的矩阵,从A到C的旋转可以用一个矩阵来表示,由three.js函数matrix4.lookAt(eye,center,up)计算,其中'eye'是相机位置,' center'是C的坐标,'up'是相机向上的向量。那么,从C到A的旋转矩阵就是从A到C的矩阵的逆矩阵。因为相机现在面向B,所以相机的矩阵等于从A到B的旋转矩阵。
最后我们把它们放在一起,最终的旋转矩阵可以写成:rotationMatrix = matrixAtoB.multiply(new THREE.Matrix4().getInverse(matrixAtoC));
jsfiddle example.
这种方式是矩阵方式,也可以解决球极系统的问题。