スムーズなカメラの回転（ルック・コントロール）

Question

。これはカメラのコードの一部です

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

私はマウスをドラッグして見て回ることができます。問題ない;よく働く！しかし、私はカメラが回転するときに滑らかな動きを実現したい（Google Street Viewのように）。

私は多少の検索をしましたが、それほど多くは見つかりませんでした。 WebVRに切り替える前にUnity3Dを使用しました。だから、私はカメラの動きをlerpingというコンセプトを持っていますが、私はA-Frameでどこから始めるべきか分かりません。

助けてください？

ありがとうございます！

Answer 1

あなたは、あなたがそれを回転させた後、しばらくの間、回転するカメラを維持したい場合は、次の心AFRAMEで
1.キープがVRためであると考えられる、ユーザーが原因となるためにそれを望んでいるよりも多くのカメラを動かします深刻な頭痛。

2.私は準備ができてコンポーネント、唯一の議論を、見たhaventので、あなたはまだそれを行う、私はアイデアをいくつ持っているしたい場合：
a）の安いバージョン、あなたが<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秒間タイムアウトするか、またはアニメーションが終了したかどうかをチェックするリスナーを必要とします。 （2番目のオプションは、アニメーションの最後の正確な時刻を取得するためには良い方法です）。

1.リスナーからコンポーネントの回転量を確認してから、newRotation.yをさらに近づけたり、近くに設定したりする必要があります。
2. tick（）の回転を確認して実際の回転速度を取得し、回転デルタ速度を取得し、移動距離を実際に計算します。しかし、あなたが科学的なプロジェクトを作っていない限り、そのように具体化する必要はありません。