title: Move an object along a path or spline in threejs
body: <p>I am trying to move an object along a path in Three.js. I'd like to build the path in a 'constructed' way, using the <code>Path</code> object like this:</p>
  
  <pre><code>var path = new THREE.Path([
      new THREE.Vector2(0, 0),
      new THREE.Vector2(0, inDistance)
  ]);
  
  path.arc(arcRadius, 0, arcRadius,
      Geo.rad(180), Geo.rad(90), true);
  
  path.lineTo(arcRadius + outDistance, arcRadius + inDistance);
  </code></pre>
  
  <p>Then I could use <code>path.getPoint(t)</code> and <code>path.getTangent(t)</code> to get an updated position for my object:</p>
  
  <pre><code>    let position = path.getPoint(percentTraveled);
      let tangent = path.getTangent(percentTraveled);
  
      state.model.position.x = position.x;
      state.model.position.y = position.y;
  </code></pre>
  
  <p>There are two problems with this:</p>
  
  <ul>
  <li>Path is only 2D</li>
  <li>The Path object can't be translated to the location and orientation of the object, so the positions / and tangents returned are absolute positions.</li>
  </ul>
  
  <p>I've read <a href="https://stackoverflow.com/questions/11179327/orient-objects-rotation-to-a-spline-point-tangent-in-three-js">this question</a>, which discusses how to use a <code>SplineCurve3</code> to move along a path, but this solution doesn't explain how to build a spline constructed from a set of lines and arcs.</p>
  
  <p>How do you do that?</p>