title: Animate object along a path in three.js
body: <p>I am trying to animate a cube along a path in three.js. </p>
  
  <p><a href="https://i.stack.imgur.com/iEVUW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iEVUW.png" alt="enter image description here"></a></p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code> // Ellipse class, which extends the virtual base class Curve
      var curve = new THREE.EllipseCurve(
          0,  0,            // ax, aY
          16, 21.28,           // xRadius, yRadius
          0,  2 * Math.PI,  // aStartAngle, aEndAngle
          false,            // aClockwise
          0                 // aRotation
      );
  
      //defines the amount of points the path will have
      var path = new THREE.Path( curve.getPoints( 100 ) );
      var geometrycirc = path.createPointsGeometry( 100 );
      var materialcirc = new THREE.LineBasicMaterial( {
          color : 0xff0000
      } );
  
      // Create the final object to add to the scene
      var ellipse = new THREE.Line( geometrycirc, materialcirc );
      ellipse.position.set(0,1,0);
      this.scene.add( ellipse );
  
      // add the box to the scene
      this.scene.add(this.box);
  </code></pre>
  
  <p>I have being doing some research into how this could be done and came across this fiddle <a href="http://jsfiddle.net/SCXNQ/891/" rel="noreferrer" title="animate on path">animate on path</a> This method uses a the THREE.SplineCurve3 method to create the points for the box to use.</p>
  
  <p>My question is do I need to convert my path to use the THREE.SplineCurve3 method.</p>
  
  <p>Or can I use the path as it is? </p>
  
  <p>Any help or pointers would be appreciated.</p>
  
  <p>many thanks</p>