フィジカルエンジンでフレームをカメラに移動

Question

私のフレームアプリケーションで物理エンジンを使用しています。ユーザーがボタンをクリックしたときにカメラを動かしたいと思います。

モーションのメソッドとしてapplyImpulseを使用しているので、物理エンジンのプロパティを保持します。ここで

は私の例のシーンです：

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script> 
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v2.3.0/dist/aframe-extras.min.js"></script> 
<a-scene physics> 
<!-- Camera --> 
<a-entity id="cameraWrapper" geometry="box" dynamic-body="mass:1" position="0 1 0" width="2" height="1" depth="2" listener> 
<a-entity id="camera" camera universal-controls position="0 1 0" rotation="0 0 0"> 
</a-entity> 
</a-entity> 
<a-grid static-body position="0 0 0"></a-grid> 
</a-scene> 
<div> 
<a id="impulseButton">Move</a> 
</div> 

カメラを移動することになっているJavaScriptのメソッドは次のようになります。

$(document).ready(function(){ 
    $("#impulseButton").on("click",function(){ 
    applyImpulse(); 
    }); 

function applyImpulse(){ 
    var x = 0; 
    var y = 0; 
    var z = 1; 
    var el = $('#cameraWrapper')[0]; 
    el.body.applyImpulse(
     new CANNON.Vec3(x,y,z), 
     new CANNON.Vec3().copy(el.body.position) 
    ); 
    } 
}); 

しかし、動きが非常に滑らかではないようだ、とするときユーザーがWASDコントロールを使用すると、cameraWrapperエンティティは古い場所に残ります。 applyImpulseでカメラをスムーズに動かすにはどうすればいいですか？

Answer 1

universal-controlsコンポーネントは、wasd-controlsとlook-controlsの代わりになり、aframe-physics-systemと互換性があります。これが有用なキーケースは、カメラが障害物を通過するのを防ぐことです（I don't recommend in VR）が、デスクトップ以外のVRアプリケーションではまだ有効です。

使用：

<a-entity camera universal-controls kinematic-body></a-entity> 

kinematic-body成分は、プレーヤに衝突を検出するために添加されます。ここにはmore complete exampleがあります。

---

注：AFRAME-エキストラの将来のバージョンは、おそらくkinematic-bodyとカメラの衝突のためのサポートを持っていないので、あなたがバージョン3.X.X.で中にロックすることができますこれは残念なことに、パフォーマンスのためにウェブワーカーでマルチプレイヤーエクスペリエンスや物理学を実行するための物理学を持つなど、主要なVRケースをよりよくサポートするために必要です。

Answer 2

私はそれが動きの質問であると思うので、js/aframeだけが必要です。それはこのように見えるはずです。これはちょうどクイックn汚いですが、あなたにアイデアを与える必要があります。あなたはプレイヤーの動きを察知することができ、これを行うための多くの方法があります。キー機能をボタン機能に変更するだけでよいのです。

だから、それはすべてのentitysの種類（カム、光、プレイヤー...）のためのより多くのこのようなものだ：

this.camMove = function(){ 
     // delta = change in time since last call (seconds) 
      delta = clock.getDelta(); 
      var mDir = 100 * delta; 
      moves = false; 

      var mButtons = ["button1", "button2", "button3"]; 
      for (var i = 0; i < mButtons.length; i++) 
      { 
       if (mButtons >= 0) 
        moves = true; 
      } 

      if (mButtons === button1) 
       cam.translateX(mDir); 
      if (mButtons === button2) 
       cam.translateX(-mDir); 
      if (mButtons === button3) 
       cam.translateY(-mDir); 
       ................ 
       ............ 
       ........ 
} 

時計はあなたのAFRAMEで機能する必要がありますが、それについてのイムはわかりません私はthree.jsをこのようなものに使うからです。