Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

var aframeAlongpathComponent = require("aframe-alongpath-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-alongpath-component v1.0.5

A-Frame Component that allows entities to follow predefined paths

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

PropertyDescriptionDefault Value
curveSelector to reference to the corresponding curve''
triggersSelector to identify the Trigger-Points that should fire the alongpath-trigger-activated-Event when the entity moves close to it.'a-curve-point'
triggerRadiusDefines how close the entity should be to the Trigger-Point to activate it.0.01
durDuration in milliseconds for the object to follow the entire path1000
delayNumber of milliseconds to wait for the animation to begin2000
loopWhether or not the animation should loopfalse
rotateWhether or not the Entity should adjust it's rotation while moving along the pathfalse
resetonplayWhether or not the Movement on the path should be reset on the play eventtrue

Events

EventDescription
movingstartedThe Entity is about to start moving along the path
movingendedThe Entity has completed moving along the path
alongpath-trigger-activatedThe Entity has activated a Trigger-Point (Fired on the corresponding 'curve-point')
alongpath-trigger-deactivatedThe Entity has deactivated a Trigger-Point (Fired on the corresponding 'curve-point')

States

StateDescription
moveonpathThe Entity currently moving along the path
endofpathThe Entity has completed moving along the path
alongpath-active-triggerThe 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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free