threejs:旋转全景图以查看相机方向
threejs : rotating panorama to look at camera direction
我有两个球体,上面贴有全景图像。我想在 2 个具有淡入淡出效果的全景图之间进行平滑过渡。对于这两个全景图,我都设置了初始相机方向以获得最佳视图。
现在的问题是,如果用户在第一个全景图中查看某个摄像机角度,然后他单击某个按钮切换全景我想提供淡入淡出效果并直接降落在另一个全景的初始摄像机角度上。
但由于两个全景都共享公共相机,我无法通过玩相机来实现它,所以我设计了以下解决方案 -
image depicting problem
- 旋转目标球体,使其朝向所需的相机方向。
- 旋转目标球体,使其朝向现有的相机方向。
- 淡出源球体。
- 相机看新全景相机方向。
- 将全景旋转回初始方向。
这里我找不到旋转全景看相机的公式。 (就像相机是静止的,而全景是旋转的,以达到与移动相机类似的效果)。
有人可以帮忙找到相对于相机旋转全景(球体)的公式吗?
矩阵是解决旋转问题的一个非常强大的工具。我做了一个简单的解释。
一开始,相机在左球体的中心,面向初始视点,然后,相机面向另一个点,此时,相机的旋转已经改变,接下来,相机移动到右球体的中心并保持它的方向。我们需要旋转正确的球体。如果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));
这种方式是矩阵方式,也可以用球极系解决问题。
我有两个球体,上面贴有全景图像。我想在 2 个具有淡入淡出效果的全景图之间进行平滑过渡。对于这两个全景图,我都设置了初始相机方向以获得最佳视图。 现在的问题是,如果用户在第一个全景图中查看某个摄像机角度,然后他单击某个按钮切换全景我想提供淡入淡出效果并直接降落在另一个全景的初始摄像机角度上。 但由于两个全景都共享公共相机,我无法通过玩相机来实现它,所以我设计了以下解决方案 -
image depicting problem
- 旋转目标球体,使其朝向所需的相机方向。
- 旋转目标球体,使其朝向现有的相机方向。
- 淡出源球体。
- 相机看新全景相机方向。
- 将全景旋转回初始方向。
这里我找不到旋转全景看相机的公式。 (就像相机是静止的,而全景是旋转的,以达到与移动相机类似的效果)。 有人可以帮忙找到相对于相机旋转全景(球体)的公式吗?
矩阵是解决旋转问题的一个非常强大的工具。我做了一个简单的解释。
那么,怎么做呢?我用矩阵,因为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));
这种方式是矩阵方式,也可以用球极系解决问题。