aframe-alongpath-component
v1.0.5
Published
A-Frame Component that allows entities to follow predefined paths
Downloads
134
Maintainers
protyzeReadme
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.
Properties
| 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 |
Events
| 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') |
States
| 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) |
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.
Usage
Browser Installation
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>NPM Installation
Install via NPM:
npm install aframe-alongpath-componentThen 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.