A幀中的光滑相機旋轉（外觀控制）

Question

處理the beta of my website

我正在爲應用程序的360部分使用A幀。這是我的攝像頭代碼片段

<a-camera mouse-cursor reverse-mouse-drag="true" id="cam" zoom="1.3"></a-camera> 

我可以拖動鼠標並環視四周。沒問題;很棒！但是我想在相機旋轉時實現平滑的動作（如Google Street View）。

我搜索了很多，並沒有發現太多。在切換到WebVR之前，我使用了Unity3D。所以，我有了攝像機移動的概念，但我不知道從A幀開始從哪裏開始。

請幫忙？

提前致謝！

Answer 1

如果你想後，您旋轉它，然後保持相機的同時旋轉：
1.請緊記AFRAME被認爲是爲VR，移動相機多用戶希望它可能會導致嚴重的頭痛。

2.我還沒有看到任何現成的組件，只是供討論，所以如果你還是想做到這一點，我有幾個觀點：
一）廉價版，在那裏你包裹在<e-entity>您的相機，並作出其中有<a-animation>。給它一個2000的持續時間，一個開始的事件，和一些不錯的寬鬆。檢查出documentation。然後製作一個組件，它將檢查您的相機的旋轉像這樣：

AFRAME.registerComponent('camera-check', { 
    init: function() { 
    var rotation, newRotation; 
    camera = document.querySelector('a-camera'); 
    camera.addEventListener('componentchanged', function(evt) { 
     if (evt.detail.name === 'rotation') { 
     // here You have your new rotation reference in evt.detail.newData 
     // and Your old rotation reference in evt.detail.oldData 
     rotation = newData-oldData; 
     if(rotation>0){ 
      newRotation = newData; 
      newRotation.y +=15; 
     }else{ 
      newRotation = newData; 
      newRotation.y -=15; 
     } 
    }); 
    } 
}); 

然後，監聽mouseup事件。當它被觸發時，將動畫組件的to屬性設置爲newRotation，併發出啓動動畫的事件。

我希望你明白了。獲取輪換率。在mouseup上找到你正在旋轉和移動更多。緩解措施應該使其順利。

創建附加實體是因爲在動畫攝影機時，可以觸發組件更改事件。您還可以進行標誌檢查，這將在動畫進行時禁用componentchanged事件。這將需要您超時2秒，或讓偵聽器檢查動畫是否結束。 （第二個選項更好，因爲您可以獲得動畫結束的確切時刻）。此外，如果您希望效果更好，您需要獲得實際旋轉速率：
1.從聽衆中檢查組件旋轉了多少，然後將newRotation.y設置得更遠或更近。
2.通過檢查tick（）上的旋轉來獲取實際旋轉速率，然後獲得旋轉變化速度，並實際計算應該移動多遠。但除非你正在進行科學項目，否則不需要這麼具體。