This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
aframe-alongpath-component with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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)|
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:
<head> <title>My A-Frame Scene</title> <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script> <script src="https://rawgit.com/protyze/aframe-curve-component/master/dist/aframe-curve-component.min.js"></script> <script src="https://rawgit.com/protyze/aframe-alongpath-component/master/dist/aframe-alongpath-component.min.js"></script> </head> <body> <a-scene> <a-curve id="track1"> <a-curve-point position="-2 2 -3"></a-curve-point> <a-curve-point position="0 1 -3"></a-curve-point> <a-curve-point position="2 2 -3"></a-curve-point> </a-curve> <a-box alongpath="curve: #track1"></a-box> </a-scene> </body>
Install via NPM:
npm install aframe-alongpath-component
Then register and use.
require('aframe'); require('aframe-curve-component'); require('aframe-alongpath-component');
Thanks to https://jsbin.com/dasefeh/edit?html,output for the basic concept.