OLD_Movement
You may already have noticed but you can move around your scene using the arrow keys or the WASD keys on your keyboard (if you've ever played games on your computer this might come naturally to you). This is great as this comes automatically and you can start exploring your scene without adding any extra code.
There are ways to augment the movement controls however to further make it your own. A-Frame is designed to work across a number of platforms (desktop, mobile and near-enough all VR headsets available) so naturally this can become tricky to handle the inputs from a large array of devices. To to cover a lot of bases, we are again going to use an A-Frame plugin called A-Frame Extras.
As we have seen already, we just need the link to where is stored online (normally found on the project's page, normally on GitHub) and then we can drop that in the <head> of our document, inside some <script> tags:
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>We are going to use an element of the A-Frame Extras library to handle various forms of control for us. To make use of it we need to be more explicit about where our player should be in the scene. The player in this case is actually a camera. We set up the camera like so:
<a-entity movement-controls>
<a-entity camera position="0 1.6 0" look-controls></a-entity>
</a-entity>The outer <a-entity> is a wrapper object which we attach the movement-controls to. Anything placed inside this entity will move around with us as we press the WASD keys, or the arrow keys. We have placed another <a-entity> inside which is the camera - this is effectively our eye into the world. So no we can explicitly set where we want it to be - this is handy if you are creating a world and want the user to start in a specific place. We just give the camera a bit of height, and also give it look-controls - this means forward (the W or up key) will be in the direction we are looking, and we can look around by clicking and dragging with the mouse. This is what you get out-the-box with A-Frame, but by getting set up but with A-Frame Extras we can now have a bit more fun.
Flying around your seen is always fun, but also often a necessary way to debug if you have a large and complex scene. To add flying abilities to your player, simply enable it like so:
<a-entity movement-controls="fly: true">
<a-entity camera position="0 1.6 0" look-controls></a-entity>
</a-entity>With that simple addition we are no longer bound to a ground plane. Look up and around and move around with the WASD keys and have a go flying around! (Click here to give it a go)
Sometimes there is good reason to attach things to the player which move around with the user. A simple example of this is to add an object in front of the player. Take special note of the nesting of entities below:
<a-entity movement-controls="fly: true">
<a-entity camera position="0 1.6 0" look-controls>
<a-box position="0.5 0 -1" scale="0.5 0.5 0.5" color="#A2A"></a-box>
</a-entity>
</a-entity>We have placed the <a-box> inside the camera entity (by inside I mean inside the <a-entity camera ... > ... </a-entity> tags). Much like the camera entity inherits the movements attached to its parent entity, anything we place inside our camera entity will inherit the look-controls and the movement. So this means the box we have placed in the scene will move around with us.
Just to make it a bit more interesting take a look at this example where the box has been animated, flying around the player camera.
This gets much more exciting with physics! If we add physics to a geometry we have attached to the player, then the player can collide with objects as they move through the world. All we need to do is add the physics library and add the physics attributes to an object attached to the player:
<a-entity id="cameraRig"
movement-controls="fly: true"
position="0 10 30"
geometry="primitive: cylinder; height: 1; radius: 0.8"
visible="false"
ammo-body="type: kinematic;"
ammo-shape="type: cylinder"
>
<a-entity camera position="0 1.6 0" look-controls></a-entity>
</a-entity>