2017-05-16 225 views
0

我有两个球体全景图像映射。我想在淡入淡出效果的2个全景之间平滑过渡。对于这两个全景我有初始摄像机方向设置为最佳视图。 现在的问题是,如果用户在第一张全景照片中查看某个摄像头角度,然后他点击某个按钮切换全景图片我想给淡入淡出效果并直接着陆到另一张全景照片的初始摄像头角度。这样看起来,在所需的摄像机方向threejs:旋转全景照相机方向

image depicting problem

  1. 旋转目标球 - 但既是全景共享共同的相机,我无法用相机播放,以实现它,所以我还设计了以下解决方案。
  2. 旋转目标球体,以便它查看现有的摄像机方向。
  3. 淡出源球。
  4. 相机看新panos相机方向。
  5. 将pano旋转回初始位置。

在这里,我无法找到旋转全景看看相机的公式。 (比如相机是静态的,全景图旋转以达到与移动相机类似的效果)。 有人可以帮助找到相对于相机旋转pano(球体)的公式。

回答

0

矩阵是解决问题转动一个非常强大的工具。我做了一个简单的解释。 enter image description here 在开始的时候,相机是在左领域,面向初始视点的中心,那么,相机的脸到另一点,现在,相机的旋转改变了,接下来,摄像机移动到右侧球体的中心并保持其方向。我们需要旋转正确的球体。如果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

这种方式是一个矩阵的方式,你也可以用球极系统解决问题。

+0

完美..谢谢! – nanni