Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/c-frame/aframe-extras
Add-ons and helpers for A-Frame VR.
https://github.com/c-frame/aframe-extras
aframe threejs webvr
Last synced: 6 days ago
JSON representation
Add-ons and helpers for A-Frame VR.
- Host: GitHub
- URL: https://github.com/c-frame/aframe-extras
- Owner: c-frame
- License: mit
- Created: 2016-02-12T03:33:40.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-11-17T09:44:19.000Z (2 months ago)
- Last Synced: 2025-01-06T05:08:21.638Z (14 days ago)
- Topics: aframe, threejs, webvr
- Language: JavaScript
- Homepage: https://c-frame.github.io/aframe-extras/examples/
- Size: 29.6 MB
- Stars: 977
- Watchers: 46
- Forks: 306
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame Extras
[](https://www.npmjs.com/package/aframe-extras)
[](https://raw.githubusercontent.com/c-frame/aframe-extras/master/LICENSE)
Add-ons and helpers for A-Frame VR.
Includes components for controls, model loaders, pathfinding, and more:
src
├── controls/ (Documentation)
│ ├── movement-controls.js
│ ├── checkpoint-controls.js
│ ├── gamepad-controls.js
│ ├── keyboard-controls.js
│ ├── touch-controls.js
│ └── trackpad-controls.js
├── loaders/ (Documentation)
│ ├── animation-mixer.js
│ ├── collada-model-legacy.js
│ ├── fbx-model.js
│ ├── gltf-model-legacy.js
│ └── object-model.js
├── misc/ (Documentation)
│ ├── checkpoint.js
│ ├── cube-env-map.js
│ ├── grab.js
│ ├── mesh-smooth.js
│ ├── normal-material.js
│ └── sphere-collider.js
├── pathfinding/ (Documentation)
│ ├── nav-mesh.js
│ └── nav-agent.js
└── primitives/ (Documentation)
├── a-grid.js
├── a-ocean.js
└── a-tube.js
## Usage (Scripts)
In the [dist/](https://github.com/c-frame/aframe-extras/tree/master/dist) folder, download any package(s) you need. Include the scripts on your page, and all components are automatically registered for you:
```html
```
replace `7.5.4` by another tag or a commit hash (for example `3e0ab50`) if you want to use a build from master branch.
You can [look at the commits](https://github.com/c-frame/aframe-extras/commits/master) and use the latest commit hash.
For partial builds, use a subpackage like `aframe-extras.controls.min.js`. Full list of packages above.
**A-Frame Version Compatibility**
| A-Frame | Extras |
|----------|--------|
| v1.4.0 | v7.0.0 |
| v1.3.0 | v7.0.0 |
| v1.2.0 | v7.0.0 |
| v1.1.0 | v6.1.1 |
> **NOTE:** Several components and examples also rely on [aframe-physics-system](https://github.com/c-frame/aframe-physics-system).
## Usage (NPM)
```
npm install --save aframe-extras
```
```javascript
// index.js
import 'aframe-extras';
// or specific packages
import "aframe-extras/controls/index.js";
import "aframe-extras/pathfinding/index.js";
```
Once installed, you'll need to compile your JavaScript using something like [webpack](https://webpack.js.org) with three defined as external, see webpack.config.js in this repo for an example.
## Examples
A live set of usage examples can be found here:
https://c-frame.github.io/aframe-extras/examples/
## Deprecated Components
The following components existed in previous versions of A-Frame Extras, but have been removed as of the latest release
| Component | Removed in | Reasons |
| ---------------- | ---------- | ------------------------------------------------------------ |
| `kinematic-body` | 7.0.0 | Using physics for movement is unstable and performs poorly. When preventing players from passing through obstacles, use a navigation mesh instead whenever possible.
The `kinematic-body` component constrainted player movement using physics, and depended on [aframe-physics-system](http://github.com/c-frame/aframe-physics-system). Using physics for locomotion is not VR-friendly, and often glitchy even for traditional 3D experiences. [Use a navigation mesh](https://github.com/c-frame/aframe-extras/tree/master/src/controls#usage) instead, whenever possible. |
| `jump-ability` | 7.0.0 | Dependent on `kinematic-body` |
| `a-hexgrid` | 7.0.0 | Was based on [this repo](https://github.com/vonWolfehaus/von-grid), which is no longer maintained, and does not work with recent versions of THREE.js. |
| `mesh-smooth` | 7.0.0 | Intended for JSON models, but the JSON Loader is [no longer part of this repo](https://github.com/c-frame/aframe-extras/commit/d079064e6ac55a4cd6bbf64bd46a576e26dd214e). More background [here](https://github.com/c-frame/aframe-extras/issues/411). |