https://github.com/mrxz/aframe-locomotion

A-Frame components for smooth locomotion and snap turning
https://github.com/mrxz/aframe-locomotion

aframe webxr

Last synced: 3 months ago
JSON representation

A-Frame components for smooth locomotion and snap turning

• Host: GitHub
• URL: https://github.com/mrxz/aframe-locomotion
• Owner: mrxz
• License: mit
• Created: 2022-05-03T14:04:01.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-03T14:51:10.000Z (7 months ago)
• Last Synced: 2024-09-26T20:55:21.720Z (3 months ago)
• Topics: aframe, webxr
• Language: TypeScript
• Homepage:
• Size: 933 KB
• Stars: 24
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# A-Frame locomotion

[![npm version](https://img.shields.io/npm/v/aframe-locomotion.svg?style=flat-square)](https://www.npmjs.com/package/aframe-locomotion)

[![npm version](https://img.shields.io/npm/l/aframe-locomotion.svg?style=flat-square)](https://www.npmjs.com/package/aframe-locomotion)

[![github](https://flat.badgen.net/badge/icon/github?icon=github&label)](https://github.com/mrxz/aframe-locomotion/)

[![twitter](https://flat.badgen.net/twitter/follow/noerihuisman)](https://twitter.com/noerihuisman)

[![ko-fi](https://img.shields.io/badge/ko--fi-buy%20me%20a%20coffee-ff5f5f?style=flat-square)](https://ko-fi.com/fernsolutions)

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.






Try the online examples





Read the docs



Blog post describing the implementation: [A-Frame Adventures 01 - Smooth locomotion and snap turning](https://fern.solutions/dev-logs/aframe-adventures-01/)



# Quick start

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

```html

```

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:

```html

    

    

    

    

    

    

```

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.