aframe-alongpath-component

aframe-alongpath-component

A component for A-Frame that allows entities to follow predefined paths.

New in Version 1.0.0:

The alongpath component went through a refactoring process. The entire logic of creating curves/paths has been extracted into the Curve component. This allows for more flexibility and less complexity and refocusing solely on the task of moving objects along a path.

With this Version it is now possible to promote single path-points to be "Trigger-Points" - meaning that they will fire an event as soon as the Entity moves past these points.


$3

| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| curve | Selector to reference to the corresponding curve | '' |
| triggers | Selector to identify the Trigger-Points that should fire the alongpath-trigger-activated-Event when the entity moves close to it. | 'a-curve-point' |
| triggerRadius | Defines how close the entity should be to the Trigger-Point to activate it. | 0.01 |
| dur | Duration in milliseconds for the object to follow the entire path | 1000 |
| delay | Number of milliseconds to wait for the animation to begin | 2000 |
| loop | Whether or not the animation should loop | false |
| rotate | Whether or not the Entity should adjust it's rotation while moving along the path | false |
| resetonplay | Whether or not the Movement on the path should be reset on the play event | true |

$3

| Event | Description |
| -------- | ----------- |
| movingstarted | The Entity is about to start moving along the path |
| movingended | The Entity has completed moving along the path |
| alongpath-trigger-activated | The Entity has activated a Trigger-Point (Fired on the corresponding 'curve-point') |
| alongpath-trigger-deactivated | The Entity has deactivated a Trigger-Point (Fired on the corresponding 'curve-point') |

$3

| State | Description |
| -------- | ----------- |
| moveonpath | The Entity currently moving along the path |
| endofpath | The Entity has completed moving along the path|
| alongpath-active-trigger | The moving entity has activated a Trigger-Point (which has now this active state) |

$3

You can use the A-Frame Inspector to manually modify the predefined paths. To do so, you can open the Inspector as usual, and start moving around the a-curve-point Entities of the curve. The path will change instantly.


$3

#### Browser Installation

Install and use by directly including the browser files:

``html


















`

#### NPM Installation

Install via NPM:

`bash
npm install aframe-alongpath-component
`

Then register and use.

`js
require('aframe');
require('aframe-curve-component');
require('aframe-alongpath-component');
``

Thanks to https://jsbin.com/dasefeh/edit?html,output for the basic concept.