title: How to use a Three.js curve as a path for moving a mesh along at
body: <p>Building an animation, currently in this state:</p>
  
  <p><a href="http://jsfiddle.net/CoderX99/66b3j9wa/1/" rel="nofollow noreferrer">http://jsfiddle.net/CoderX99/66b3j9wa/1/</a></p>
  
  <p>Please don't go through the code, it's compiled from CoffeeScript and not good for your sanity.</p>
  
  <p>For your idea, your looking at some "nordic" landscape, where ships float by and cars move on. The yellow sphere in the top left is a representation of a car, and there are winding roads represented by curves.</p>
  
  <p><code>CatmullRomCurve3</code>'s to be exact. The yellow sphere should use the curves to move along at.</p>
  
  <p>Let's use the closed curve, it's coded like so:</p>
  
  <pre><code>curveRoadNo2 = new THREE.CatmullRomCurve3([
    new THREE.Vector3( 15, roadHeight, 11 ),
    new THREE.Vector3( 12, roadHeight, 12 ),
    new THREE.Vector3( 11, roadHeight, 11 ),     
    new THREE.Vector3( 11, roadHeight, 9 ),
    new THREE.Vector3( 12, roadHeight, 8 ),
    new THREE.Vector3( 12, roadHeight, 5 ),
    new THREE.Vector3( 15, roadHeight, 3 ),
    new THREE.Vector3( 17, roadHeight, 7 ),
    new THREE.Vector3( 16, roadHeight, 8 ),
    new THREE.Vector3( 16, roadHeight, 9 ),
    new THREE.Vector3( 17, roadHeight, 11 )
  ] )
  </code></pre>
  
  <p>Randomly entered. </p>
  
  <p>Then:</p>
  
  <pre><code>curveRoadNo2.closed = true
  geometry = new THREE.Geometry()
  geometry.vertices = curveRoadNo2.getPoints( 200 )
  material = new THREE.LineBasicMaterial( { color : 0xa9c41e } )
  curveObject = new THREE.Line( geometry, material )
  scene.add( curveObject )
  </code></pre>
  
  <p>And I want to animate somehow using <code>getPoint(t)</code> and <code>getTangent(t)</code> but am a little clueless.</p>
  
  <pre><code>t = 0
  animate = -&gt;
    requestAnimationFrame animate
  
    t += 0.1
    vehicle.position = curveRoadNo2.getPoint(t)
  
    # (Not per se relevant)
    # The following works for animating the ship but makes 
    # absolutely no sense yet. 
    # Also this should move along some kind of an elliptical path,
    # showing up on to the scene, making a stop for unloading,
    # moving again. And loop.  
    # if 0 &lt; t &lt; 7
    #     v = t * 0.01
    #     ship.rotation.y += 26 * v ** 0.96 * Math.PI / 180
    #     ship.position.x += -6 * v
    #     ship.position.z +=  12 * v ** 1.3 
  
    renderer.render scene, camera
  animate()
  </code></pre>
  
  <p>As one can see the vehicle stays motionless. I looked up solutions, but they all seemed very verbose and overly complicated.</p>
  
  <p>JS answers are of course also welcome.</p>