Animate object along a path

Object follows the path defined.

by Shakti Patel

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

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 is no animation loop
    controls.minDistance = -20;
    controls.maxDistance = 50;
    
    // light
    var light = new THREE.PointLight( 0xffffff, 0.7 );
    camera.add( light );
    scene.add( camera ); // add to scene only because the camera  has a child
    
   
    
    var curve1 = new THREE.CubicBezierCurve3(
      new THREE.Vector3( -1,0,0 ),
      new THREE.Vector3( -0.5,0.5,0),
      new THREE.Vector3( 0,0,0 ),
      new THREE.Vector3( 5,0,0),
      new THREE.Vector3( 1,5,0),
    );

	var curve2 = new THREE.CubicBezierCurve3(
      new THREE.Vector3( 1,0,0 ),
      new THREE.Vector3( 2,0,0),
      new THREE.Vector3(1.7048094272613525,-0.7840057611465454,0.056153178215026855),
      new THREE.Vector3( 2.156205177307129,-1.2861229181289673,0.09211651980876923)
    );

var curve3 = new THREE.CubicBezierCurve3(
      new THREE.Vector3( 0.23302721977233887,-1.2808864116668701,0.1413232386112213 ),
      new THREE.Vector3( 0.6444002389907837,-1.0345396995544434,0.08614902198314667 ),
      new THREE.Vector3( 0,0,0 ),
      new THREE.Vector3( 1,0,0 )
    );
    
    curvee = new THREE.CurvePath();
    
		curvee.add(curve1);
		//curvee.add(curve2);
		//curvee.add(curve3);
    
   
    curvee.autoClose = false;
    
    var points = curvee.getPoints( 50 );
    var geometry = new THREE.BufferGeometry().setFromPoints( points );

    var material = new THREE.LineBasicMaterial( {...