### Basic Movement Controls Setup

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Sets up basic movement controls for a camera rig. Ensure the rig is positioned at ground level and the camera has a height offset.

```html
<a-entity id="rig"
          movement-controls
          position="25 0 25">
  <a-entity camera
            position="0 1.6 0"
            look-controls="pointerLockEnabled: true"></a-entity>
</a-entity>
```

--------------------------------

### Install A-Frame Extras via NPM

Source: https://github.com/c-frame/aframe-extras/blob/master/README.md

Install the aframe-extras package using npm. This allows for modular imports of specific components.

```bash
npm install --save aframe-extras
```

--------------------------------

### Start Animation at Specific Time

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Set a specific starting time for an animation clip in milliseconds using the `startAt` property. This is useful for precise animation control.

```html
animation-mixer="startAt: 5000"
```

--------------------------------

### Custom Movement Controls Component

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Define a custom component by overriding methods like isVelocityActive and getPositionDelta to implement unique movement behaviors. This example shows a basic custom control.

```javascript
AFRAME.registerComponent('custom-controls', {
  isVelocityActive: function () {
    return Math.random() < 0.25;
  },
  getPositionDelta: function () {
    return new THREE.Vector3(1, 0, 0);
  }
});
```

--------------------------------

### Basic Primitive Usage

Source: https://github.com/c-frame/aframe-extras/blob/master/src/primitives/README.md

Demonstrates the basic HTML usage of a-grid, a-ocean, and a-tube primitives.

```html
<a-grid></a-grid>

<a-ocean></a-ocean>

<a-tube path="5 0 5, 5 0 -5, -5 0 -5" radius="0.5" material="color: red"></a-tube>
```

--------------------------------

### HTML Structure for Pathfinding Scene

Source: https://github.com/c-frame/aframe-extras/blob/master/src/pathfinding/README.md

Sets up entities for an NPC with a nav-agent, a navigation mesh, and the main scene model. The nav-mesh component assigns the glTF model as the navigation mesh for pathfinding.

```html
<!-- NPC -->
<a-entity id="npc"
          gltf-model="npc.gltf"
          nav-agent="speed: 1.5"></a-entity>

<!-- Nav Mesh -->
<a-entity gltf-model="navmesh.gltf"
          nav-mesh></a-entity>

<!-- Scene -->
<a-entity gltf-model="scene.gltf"></a-entity>
```

--------------------------------

### Custom a-grid Primitive

Source: https://github.com/c-frame/aframe-extras/blob/master/src/primitives/README.md

Shows how to customize the a-grid primitive with a custom source image.

```html
<a-grid src="custom-image.png"></a-grid>
```

--------------------------------

### Movement Controls with Gamepad, Keyboard, and Nipple Joysticks

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Enables gamepad, keyboard, and virtual joystick controls for movement and rotation. The 'nipple-controls' are set to 'static' mode, displaying joysticks.

```html
<a-entity id="rig"
          movement-controls="controls: gamepad,keyboard,nipple"
          nipple-controls="mode: static">
  <a-entity camera
            position="0 1.6 0"
            look-controls="pointerLockEnabled: true">
  </a-entity>
</a-entity>
```

--------------------------------

### Custom a-ocean Primitive

Source: https://github.com/c-frame/aframe-extras/blob/master/src/primitives/README.md

Illustrates customizing the a-ocean primitive with specific color, width, depth, density, and speed properties.

```html
<a-ocean color="#92E2E2" width="25" depth="25" density="15" speed="2"></a-ocean>
```

--------------------------------

### Loop Animation

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Configure animation looping behavior with the `loop` property. Options include `once`, `repeat`, and `pingpong`. The `repetitions` property controls the number of additional plays.

```html
animation-mixer="loop: pingpong; repetitions: 3"
```

--------------------------------

### Import A-Frame Extras with NPM

Source: https://github.com/c-frame/aframe-extras/blob/master/README.md

Import the entire aframe-extras library or specific sub-packages when using NPM. Ensure your JavaScript is compiled with a module bundler like webpack.

```javascript
// index.js
import 'aframe-extras';
// or specific packages
import "aframe-extras/controls/index.js";
import "aframe-extras/pathfinding/index.js";
```

--------------------------------

### Load FBX Model

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Use the `fbx-model` component to load FBX files. Specify the source URL using the `src` attribute.

```html
<a-entity fbx-model="src: url(my-model.fbx);"></a-entity>
```

--------------------------------

### Apply Cube Environment Map to A-Entity

Source: https://github.com/c-frame/aframe-extras/blob/master/src/misc/README.md

Use the `cube-env-map` component to apply a CubeTexture as the envMap of an entity. Specify the path to cubemap images, their extension, reflectivity, and the materials to modify. Assumes naming scheme `negx.<ext>`, `posx.<ext>`, etc.

```html
<a-entity gltf-model="src: url(my-model.gltf);"
          cube-env-map="path: assets/folder/;
                        extension: jpg;
                        reflectivity: 0.5;
                        materials: myPrimaryMaterial, myAccentMaterial;">
</a-entity>
```

--------------------------------

### Play Animation with Regular Expression

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Enable regular expression matching for animation clip names by setting `useRegExp` to true. This allows for more complex pattern matching.

```html
animation-mixer="useRegExp: true; clip: run|walk"
```

--------------------------------

### Nipple Controls Configuration for Movement Joystick

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Customizes nipple controls to use a static mode, disabling the look joystick, and positioning the movement joystick to the right.

```html
nipple-controls="mode: static; lookJoystickEnabled: false; moveJoystickPosition: right"
```

--------------------------------

### Include A-Frame Extras via Script Tag

Source: https://github.com/c-frame/aframe-extras/blob/master/README.md

Include this script tag in your HTML to load all A-Frame Extras components. Replace '7.7.0' with a specific version tag or commit hash for custom builds.

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

--------------------------------

### Movement Controls with Checkpoints

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Configures movement controls to use checkpoints for navigation, disabling other input methods. The 'checkpoint-controls' component animates movement to checkpoints.

```html
<a-entity id="rig"
          movement-controls="controls: checkpoint"
          checkpoint-controls="mode: animate">
  <a-entity camera
            position="0 1.6 0"
            look-controls="pointerLockEnabled: true">
  </a-entity>
</a-entity>
```

--------------------------------

### Scale FBX Model

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

When loading FBX models, you may need to scale them down. Apply the `scale` attribute to the entity.

```html
<a-entity scale="0.5 0.5 0.5" fbx-model="src: url(my-model.fbx);"></a-entity>
```

--------------------------------

### Create a levitate animation component

Source: https://github.com/c-frame/aframe-extras/blob/master/examples/castle/index.html

Animates an entity's mesh by rotating it and oscillating its vertical position over time.

```javascript
/**
 * Simple spin-and-levitate animation.
 */
AFRAME.registerComponent('levitate', {
  tick: function (t, dt) {
    var mesh = this.el.getObject3D('mesh');
    if (!mesh) return;
    mesh.rotation.y += 0.1 * dt / 1000;
    mesh.position.y = 0.25 * Math.sin(t / 1000);
  }
});
```

--------------------------------

### Set NPC Destination with Nav Agent

Source: https://github.com/c-frame/aframe-extras/blob/master/src/pathfinding/README.md

Activates the nav-agent component on an NPC entity to move it towards a specified destination point. Ensure the NPC and nav mesh are correctly set up in the scene.

```javascript
var npcEl = document.querySelector('#npc');
pcEl.setAttribute('nav-agent', {
  active: true,
  destination: e.detail.intersection.point
});
```

--------------------------------

### Create an emissive glow component

Source: https://github.com/c-frame/aframe-extras/blob/master/examples/castle/index.html

Applies an emissive color and intensity to all meshes within the entity when the object is set.

```javascript
/**
 * Basic emissive effect.
 */
AFRAME.registerComponent('glow', {
  schema: {
    color: {default: '#ffffff', type: 'color'},
    intensity: {default: 1.0}
  },
  init: function () {
    this.el.addEventListener('object3dset', function () { this.update(); }.bind(this));
  },
  update: function () {
    var data = this.data;
    this.el.object3D.traverse(function (node) {
      if (node.isMesh) {
        node.material.emissive.copy(new THREE.Color(data.color));
        node.material.emissiveIntensity = data.intensity;
      }
    });
  }
});
```

--------------------------------

### Cross-fade Animations

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Smoothly transition between animation clips by setting the `crossFadeDuration` property in seconds.

```html
animation-mixer="clip: walk; crossFadeDuration: 0.5"
```

--------------------------------

### Create a mobile-detection removal component

Source: https://github.com/c-frame/aframe-extras/blob/master/examples/castle/index.html

Removes the entity from the scene hierarchy if the current device is detected as mobile.

```javascript
/**
 * Removes current element if on a mobile device.
 */
AFRAME.registerComponent('not-mobile', {
  init: function () {
    var el = this.el;
    if (el.sceneEl.isMobile) {
      el.parentEl.remove(el);
    }
  }
});
```

--------------------------------

### Clamp Animation When Finished

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Prevent an animation from looping or continuing after it has finished by setting `clampWhenFinished` to true.

```html
animation-mixer="clampWhenFinished: true"
```

--------------------------------

### Control Animation Playback Speed

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Adjust the playback speed of an animation using the `timeScale` property. A value of 0 pauses the animation, and negative values play it in reverse.

```html
animation-mixer="timeScale: 0.5"
```

--------------------------------

### Play Specific Animation Clip

Source: https://github.com/c-frame/aframe-extras/blob/master/src/loaders/README.md

Use the `animation-mixer` component to control animations in glTF and three.js models. Specify the animation clip name using the `clip` property. Wildcards are supported.

```html
animation-mixer="clip: run_*"
```

--------------------------------

### Movement Controls Constrained to Navigation Mesh

Source: https://github.com/c-frame/aframe-extras/blob/master/src/controls/README.md

Enables movement controls that are constrained to a navigation mesh, ensuring the user stays within defined walkable areas.

```html
<a-entity id="rig" movement-controls="constrainToNavMesh: true">
  <a-entity camera
            position="0 1.6 0"
            look-controls="pointerLockEnabled: true">
  </a-entity>
</a-entity>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.