javascript - Move camera in aframe with physics engine

Question

I am using a physics engine in my aframe application, and I want the camera to move when the user clicks a button.

I want to keep the physics engine properties so I am using applyImpulse as a method for motion.

Here is my example scene:

<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>

The javascript method that is supposed to move the camera looks like this:

$(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)
    );
  }
});

However, the movement seems not very smooth, and when the users uses WASD controls, the cameraWrapper entity remains at the old location. How can I move the camera with applyImpulse smoothly?

Answer 1

The universal-controls component is a replacement for wasd-controls and look-controls that is compatible out of the box with aframe-physics-system. The key case where this is helpful is in preventing the camera from going through obstacles, which I don't recommend in VR, but is still useful for desktop non-VR applications.

Usage:

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

The kinematic-body component is added to detect collisions on the player. Here is a more complete example.

---

NOTE: Future versions of aframe-extras will probably not have support for kinematic-body and camera collisions, so you may be locked in at version 3.X.X. This is unfortunately necessary to support key VR cases better, like having physics for multiplayer experiences and running physics in a web worker for performance.