A-Frame Extras

A-Frame Extras provides various add-ons and helpers for A-Frame VR, organized into the following functional areas:

• controls/: Movement and input handling (e.g., movement-controls, keyboard-controls, gamepad-controls).
• loaders/: Model loading enhancements (e.g., animation-mixer, fbx-model).
• misc/: Utility components (e.g., grab, sphere-collider, checkpoint).
• pathfinding/: Navigation systems (e.g., nav-mesh, nav-agent).
• primitives/: Extended A-Frame primitives (e.g., a-grid, a-ocean, a-tube).

Note: Several components and examples rely on the aframe-physics-system.

For projects using a module bundler, install the package via npm. Once installed, import the main package or specific sub-modules to register the components.

Note: When using a bundler like Webpack, you must define three as an external dependency to avoid conflicts with A-Frame's internal version of Three.js.

npm install --save aframe-extras

// Import everything
import 'aframe-extras';

// Or import specific packages
import "aframe-extras/controls/index.js";
import "aframe-extras/pathfinding/index.js";

To use A-Frame Extras in a web page without a build step, download the desired scripts from the dist/ folder and include them in your HTML. All components are automatically registered upon script inclusion.

You can use the full bundle or specific subpackages (e.g., aframe-extras.controls.min.js) for partial builds.

<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.7.0/dist/aframe-extras.min.js"></script>

The aframe-extras pathfinding module provides components and systems for navigation using navigation meshes. It consists of three primary parts:

1. Nav-Mesh: A component used to define the walkable surface area.
2. Nav-Agent: A component attached to an entity (the agent) to enable it to navigate the mesh.
3. Pathfinding System: An A-Frame system that manages the navigation logic and mesh data.

To use these, ensure you have imported the pathfinding module in your project.

// Import the pathfinding module to register components and systems
import './pathfinding/index.js';

The library is organized into several functional modules. When you import the main entrypoint, the following component groups are registered:

• Controls: Movement and interaction controls (e.g., movement-controls, teleport-controls).
• Loaders: Specialized loaders for assets (e.g., GLTF loading enhancements).
• Misc: Miscellaneous utility components.
• Pathfinding: Components for navigation and pathfinding logic.
• Primitives: Custom A-Frame primitives to simplify scene construction.

The behavior of the trackpad-controls component changes significantly based on the mode property:

• swipe: Calculates movement based on the delta between the starting touch position and the current axis position. It uses trackpadtouchstart and trackpadtouchend events.
• touch: Uses continuous axis data relative to the center. It uses trackpadtouchstart and trackpadtouchend events.
• press: Uses axis data triggered by a press/release pattern. It uses trackpaddown and trackpadup events.

In all modes, the component determines whether to move along the X or Z axis by comparing the absolute change in both axes and selecting the one with the greater magnitude (preventing diagonal movement).

To restrict movement to a walkable area, set constrainToNavMesh: true. This requires the scene to have a nav system installed. When enabled, the component uses the nav system to clamp the entity's position to the valid navigation area based on its current velocity and heading.

Note: In VR mode, the component calculates the position relative to the camera offset to ensure the user's view remains consistent with the constrained movement.

<!-- Ensure the scene has a nav system and the entity has rotation dependency -->
<a-scene>
  <a-entity movement-controls="constrainToNavMesh: true" rotation></a-entity>
</a-scene>

A-Frame Extras is a collection of miscellaneous components, loaders, controls, and primitives for A-Frame. It is distributed as a set of modules that register components directly onto the AFRAME global object.

To use the library, you can include the script via a CDN or install it via NPM. Once loaded, the components (such as loaders for GLTF, pathfinding utilities, and movement controls) become available as standard A-Frame components that can be attached to entities in your HTML or via the A-Frame API.

<!-- Example: Using via CDN (assuming the script is loaded) -->
<a-entity movement-controls="speed: 0.3"></a-entity>

<!-- Example: Using via NPM -->
<script type='module'>
  import 'aframe-extras';
</script>

The animation-mixer component is a player for animation clips, designed to work with any model format that supports skeletal or morph animations via THREE.AnimationMixer. It allows you to play, stop, and control animations on an A-Frame entity containing a model.

To use it, attach the animation-mixer component to an entity that has a loaded model (e.g., via gltf-model).

<a-entity gltf-model="#my-model" animation-mixer="clip: *; loop: repeat"></a-entity>

The sphere-collider component accepts the following schema properties:

The object-model component accepts the following configuration properties in its schema:

The nav-mesh component accepts the following configuration property in its schema: