Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>a-frame - path interpolation</title>
        <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
​
        <script>
(function() {
'use strict';
​
​
​
var alongpathComp = {
  schema: {
    path     : { default: ''    },
    closed   : { default: false },
    dur      : { default: 1000  }
  },
​
  init: function() {
      var ent = this.el;
      var d = this.data;
      var points = d.path.split(' ').map(function(p) {
          p = p.split(',');
          return new THREE.Vector3(
              parseFloat(p[0]),
              parseFloat(p[1]),
              parseFloat(p[2])
          );
      });
      var ctor = d.closed ? 'ClosedSplineCurve3' : 'SplineCurve3';
      var curve = new THREE[ctor](points);
​
      var onFrame = function onFrame(t) {
        window.requestAnimationFrame(onFrame);
        t = t % d.dur;
        var i = t / d.dur;
        try {
          var p = curve.getPoint(i);
          ent.setAttribute('position', p);
        } catch (ex) {}
      };
​
      onFrame();
  },
​
  update: function(oldData) {},
​
  remove: function() {}
};
​
AFRAME.aframeCore.registerComponent('alongpath', alongpathComp);
​
})();
        </script>
    </head>
​
    <body>
        <a-scene>
          <a-camera
              position="0 1.8 32"></a-camera>
          <a-entity
              id="sph"
              geometry="primitive:sphere; radius:0.5"
              material="color:red"
              position="0 0 0"
              alongpath="path:-10,0,10 -5,5,5 0,0,0 5,-5,5 10,0,10; closed:true; dur:2000"></a-entity>
        </a-scene>
    </body>
</html>
​
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
josepedrodiaspro
0viewers