A-Frame components for smooth locomotion and snap turning
MIT License
A collection of A-Frame components, systems and primitives that enable all sorts of locomotion in VR. It't built to be modular, flexible and easy to use. Currently supports smooth locomotion, snap turning and smooth turning. Besides the actual modes of locomotion, there are auxiliary components to improve the locomotion experience like a vignette when moving, fading when snap turning and more.
Blog post describing the implementation: A-Frame Adventures 01 - Smooth locomotion and snap turning
To add aframe-locomotion
to your A-Frame project, all you have to do is load the aframe-locomotion javascript:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-locomotion.umd.min.js"></script>
This will automatically register the components smooth-locomotion
and snap-turn
. These need to be attached to the controllers as part of a camera rig, as follows:
<!-- Camera rig -->
<a-entity id="rig">
<a-camera id="camera"></a-camera>
<!-- Hands -->
<a-entity
hand-controls="hand: left"
smooth-locomotion="target: #rig; reference: #camera">
</a-entity>
<a-entity
hand-controls="hand: right"
snap-turn="target: #rig; reference: #camera">
</a-entity>
</a-entity>
Both smooth-locomotion
and snap-turn
have more properties that can be used to tweak the behaviour. Check the Documentation to learn more or explore the examples.
If you've got any questions, feedback, suggestions or even want to help out, feel free to reach out to me.