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.
|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|
|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')|
|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)|
Usage with A-Frame Inspector
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.
Install and use by directly including the browser files:
My A-Frame Scene
Install via NPM:
npm install aframe-alongpath-component
Then register and use.
Thanks to https://jsbin.com/dasefeh/edit?html,output for the basic concept.