title: THREE.js camera following a specific path
body: <p>I'm trying to make a game with THREE.js. I have a path with a lot of curves combined with some straight paths.</p>
  
  <p>I found an example on Internet and tried to implement TrackballControls.js to make the camera follow a line, but the camera doesn't lookAt the front, it moves weird.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var controls = new THREE.TrackballControls(camera, render.domElement);
  var numPoints = 50;
  spline = new THREE.CatmullRomCurve3([
      new THREE.Vector3(0, 0, 0),
      new THREE.Vector3(50, 0, 0),
      new THREE.Vector3(0, 0, -100)
  ]);
  
  var material = new THREE.LineBasicMaterial({
      color: 0xff00f0,
  });
  
  var geometry = new THREE.Geometry();
  var splinePoints = spline.getPoints(numPoints);
  
  for (var i = 0; i &lt; splinePoints.length; i++) {
      geometry.vertices.push(splinePoints[i]);
  }
  
  line = new THREE.Line(geometry, material);
  line.position.set(0, 0, 0);
  scene.add(line);
  var counter = 0;
  
  if (counter &lt;= 1) {
      camera.position.copy( spline.getPointAt(counter) );
      tangent = spline.getTangentAt(counter).normalize();
      axis.crossVectors(up, tangent).normalize();
      var radians = Math.acos(up.dot(tangent));
      camera.quaternion.setFromAxisAngle(axis, radians);
      counter += 0.005
  } else {
      counter = 0;
  }
  </code></pre>
  
  <p>Thanks.</p>