A-Frame components for smooth locomotion and snap turning

Overview

A-Frame locomotion

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 auxillary components to improve the locomotion experience like a vignette when moving, fading when snap turning and more.

Aframe locomotion example
Try the online examples
Read the docs

Blog post describing the implementation: A-Frame Adventures 01 - Smooth locomotion and snap turning

Buy Me a Coffee at ko-fi.com

Quick start

To add aframe-locomotion to your A-Frame project, all you have to do is load the aframe-locomotion javascript:

<script src="https://unpkg.com/[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"
        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.

Features

  • Smooth locomotion
  • Snap turning (with optional fade transitions)
  • Smooth turning
  • Vignette when moving
  • Nav-mesh support

Planned features

  • Velocity effectors (e.g. conveyor belts, moving platforms)
  • Smooth snap turning
  • Momentum preservation
  • Teleport
  • Flying
  • Head-collision prevention

Questions

If you've got any questions, feedback, suggestions or even want to help out, feel free to reach out to me.

You might also like...

Frame Animation Manager

Frame Animation Manager

Clockz.js (demo) Clockz is a Super-smooth Frame Animation manager to help you manage multiples animations in same time. Installation Just include this

Mar 27, 2021

Simple rate-limiter NPM Module used for blocking IPs that exceeds certain number of requests per second in a specific time frame.

API Rate Limiter Zero-Dependencies Simple rate-limiter NPM Module used for blocking IPs that exceeds certain number of requests per second in a specif

Oct 7, 2022

A collection of preloaded and essential files that makes the website more attractive, smooth and user friendly

Web-Docs A collection of preloaded and essential files that makes the website more attractive, smooth and user friendly How to use: git clone https://

Dec 17, 2022

A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.

A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.

Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (

Dec 30, 2022

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.

smooth-shadow Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation. Demo As Tobias already p

Oct 15, 2022

SafeCycle—a tool that keeps cyclists safe. Gone are days of weaving through busy city streets, SafeCycle finds all the bike routes for you to ensure a smooth ride wherever you want to go.

Inspiration Biking—an everyday form of travel for students and professionals across the globe. On-campus, back home, and with the people that we know

May 2, 2022

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Nov 25, 2022

Smooth subdivision surface modifier for use with three.js BufferGeometry.

Smooth subdivision surface modifier for use with three.js BufferGeometry.

Three Subdivide This modifier uses the Loop (Charles Loop, 1987) subdivision surface algorithm to smooth modern three.js BufferGeometry. — Live Demo —

Dec 3, 2022

Smooth scroll animation - vanilla JavaScript

Smooth Scroll Animation Using Vanilla JavaScript Provides smooth scroll functionality on clicking buttons with different eeasing properties. The "smoo

Aug 14, 2022
Comments
  • Update snap-turn.component.md

    Update snap-turn.component.md

    Make snap-turn docs match "turnSize" wording used in JS file https://github.com/mrxz/aframe-locomotion/blob/main/src/movement/snap-turn.component.js

    opened by stephenjbell 1
Owner
Noeri Huisman
Software developer
Noeri Huisman
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A small library for turning RSS XML feeds into JavaScript objects

rss-parser A small library for turning RSS XML feeds into JavaScript objects. Installation npm install --save rss-parser Usage You can parse RSS from

Robert Brennan 1.1k Dec 31, 2022
A music NFT experience. Turning pain into art.

Music NFTs - Catalog Factory Curation as a Public Good Official submission for Zora Hackathon at ETH Global. music nfts + Zora V3. All minted music nf

Erick Martinez Jr. 13 Dec 10, 2022
A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

null 6 May 31, 2022
A collection of A-Frame components

Fern A-Frame Components Collection This is a collection of A-Frame components. Check the individual components for their usages and corresponding exam

Noeri Huisman 16 Dec 12, 2022
Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap ✨👌

⚠️ IMPORTANT UPDATE: July 13th, 2022 Hi, this is Oz Ramos and I wanted to quickly explain what happened to this project and what I plan to do moving f

Oz 43 Jan 3, 2023
A prototype snap for injecting gas fee prices into a confirmation window that also serves as the basis for a 5-minute Snaps tutorial

@Montoya/gas-fee-snap A simple Snap example based on @MetaMask/template-snap. Read below for a tutorial! Prerequisites Before you begin, make sure you

Christian Montoya 18 Dec 8, 2022
Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap!

?? thirdsnips Stop re-writing thirdweb snippets. Use thirdsnips to make it all snap! Thirdsnips is a tool which enhances the developer experience whil

Avneesh Agarwal 24 Dec 14, 2022
Minimalist Web XR Location Based Markers for A-Frame 1.3.0

LBAR.js “I understand how the engines work now. It came to me in a dream. The engines don't move the ship at all. The ship stays where it is and the e

Media Engineering Institute 9 Dec 3, 2022