protyze/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.

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-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.

protyze / aframe-alongpath-component