2017-05-16 269 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