javascript - Animate object along a path in three.js -

i trying animate cube along path in three.js.

code

 // ellipse class, extends 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 amount of points path have     var path = new three.path( curve.getpoints( 100 ) );     var geometrycirc = path.createpointsgeometry( 100 );     var materialcirc = new three.linebasicmaterial( {         color : 0xff0000     } );      // create final object add scene     var ellipse = new three.line( geometrycirc, materialcirc );     ellipse.position.set(0,1,0);     this.scene.add( ellipse );      // add box scene     this.scene.add(this.box); 

i have being doing research how done , came across fiddle animate on path method uses three.splinecurve3 method create points box use.

my question need convert path use three.splinecurve3 method.

or can use path is?

any or pointers appreciated.

many thanks

object animating on path

code

// globals - allocate these outside of render loop - changed var cubes = [], marker, spline; var matrix = new three.matrix4(); var = new three.vector3( 0, 1, 0 ); var axis = new three.vector3( ); var pt, radians, axis, tangent, path;  // getpoint starting variable - !important - me ;) var t = 0;  //this function generates cube , chooses random color  //on initial load.  function getcube(){ // cube mats , cube var mats = []; (var = 0; < 6; ++) {     mats.push(new  three.meshbasicmaterial({color:math.random()*0xffffff})); }  var cube = new three.mesh(     new three.cubegeometry(2, 2, 2),     new three.meshfacematerial( mats ) );  return cube }  // ellipse class, extends virtual base class curve function ellipse( xradius, yradius ) {      three.curve.call( );      // add radius property     this.xradius = xradius;     this.yradius = yradius;   }   ellipse.prototype = object.create( three.curve.prototype );  ellipse.prototype.constructor = ellipse;   // define getpoint function subclass  ellipse.prototype.getpoint = function ( t ) {   var radians = 2 * math.pi * t;   return new three.vector3( this.xradius * math.cos( radians ),                           this.yradius * math.sin( radians ),                           0 );  };  //  var mesh, renderer, scene, camera, controls;   function init() {  // renderer renderer = new three.webglrenderer(); renderer.setsize( window.innerwidth, window.innerheight ); document.body.appendchild( renderer.domelement );  // scene scene = new three.scene();  // camera camera = new three.perspectivecamera( 45, window.innerwidth / window.innerheight, 1, 1000 ); camera.position.set( 20, 20, 20 );  // controls controls = new three.orbitcontrols( camera, renderer.domelement ); controls.addeventlistener( 'change', render ); // use if there no animation loop controls.mindistance = 10; controls.maxdistance = 50;  // light var light = new three.pointlight( 0xffffff, 0.7 ); camera.add( light ); scene.add( camera ); // add scene because camera  has child  // axes scene.add( new three.axishelper( 20 ) );   //////////////////////////////////////// //      create cube               // ////////////////////////////////////////  marker = getcube(); marker.position.set(0,0,0); scene.add(marker);   //////////////////////////////////////// //      create extruded shape      // ////////////////////////////////////////  // path path = new ellipse( 5, 10 );  // params var pathsegments = 64; var tuberadius = 0.5; var radiussegments = 16; var closed = true;  var geometry = new three.tubebuffergeometry( path, pathsegments, tuberadius, radiussegments, closed );  // material var material = new three.meshphongmaterial( {     color: 0x0080ff,  } );  // mesh mesh = new three.mesh( geometry, material ); scene.add( mesh );  ////////////////////////////////////////////////////////////////////////// //       create path based on our shape above              // //////////////////////////////////////////////////////////////////////////  //please note red ellipse created has guide  square true tangent , positioning.  // ellipse class, extends virtual base class curve     var curve = new three.ellipsecurve(         0,  0,            // ax, ay         6, 11,           // xradius, yradius         0,  2 * math.pi,  // astartangle, aendangle         false,            // aclockwise         0                 // arotation     );      //defines amount of points path have     var path2 = new three.path( curve.getpoints( 100 ) );      geometrycirc = path2.createpointsgeometry( 100 );     var materialcirc = new three.linebasicmaterial( {         color : 0xff0000     } );      // create final object add scene     var ellipse = new three.line( geometrycirc, materialcirc );     ellipse.position.set(0,0,0);     scene.add( ellipse );      }  function animate() { requestanimationframe(animate);  render(); }   function render() {      // set marker position     pt = path.getpoint( t );      // set marker position     marker.position.set( pt.x, pt.y, pt.z );      // tangent curve     tangent = path.gettangent( t ).normalize();      // calculate axis rotate around     axis.crossvectors( up, tangent ).normalize();      // calcluate angle between vector , tangent     radians = math.acos( up.dot( tangent ) );      // set quaternion     marker.quaternion.setfromaxisangle( axis, radians );      t = (t >= 1) ? 0 : t += 0.002;      renderer.render( scene, camera );  }  init(); animate(); 

conclusion

so fortunate stumble upon answer. in case creation of subclass object allowed me use it's data points object use guide.

yes aware thinking 'what guy talking about' have created fiddle @ , study.

fiddle: object animating on path