Move camera in aframe with physics engine

问题

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?

回答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.

回答2:

I think that is just a movement question so js/aframe would be all you need. It should look like this. This is just a quick n dirty but should give you the idea. You can serach about player movement stuff and would find many ways to do this. Just change the key functions to button functions and you should be good to go.

So it would be more like this for all kind of entitys (cam, light, player.... ):

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 );
                ................
                ............
                ........
}

clock should be a function in your aframe, but im not sure about it because i use three.js for things like this.

来源：https://stackoverflow.com/questions/43503796/move-camera-in-aframe-with-physics-engine

标签

javascript

aframe

webvr

cannon.js