title: Three.js rotate a sphere that's followed by a camera
body: <p>I'm working on a toy Three.js scene in which I want to follow a sphere with a camera<a href="https://bl.ocks.org/duhaime/801daaa005c373eab6847741bd3f497a" rel="nofollow noreferrer"> [demo]</a>. Right now, though, I can't figure out how to make the sphere "roll" without also rotating the camera.</p>
  
  <p>Here's the code I use to update the sphere's position each frame:</p>
  
  <pre><code>function moveSphere() {
    var delta = clock.getDelta(); // seconds
    var moveDistance = 200 * delta; // 200 pixels per second
    var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 deg) per sec
  
    // move forwards/backwards/left/right
    if ( pressed['W'] ) {
      sphere.translateZ( -moveDistance );
    }
    if ( pressed['S'] ) 
      sphere.translateZ(  moveDistance );
    if ( pressed['Q'] )
      sphere.translateX( -moveDistance );
    if ( pressed['E'] )
      sphere.translateX(  moveDistance ); 
  
    // rotate left/right/up/down
    var rotation_matrix = new THREE.Matrix4().identity();
    if ( pressed['A'] )
      sphere.rotateOnAxis(new THREE.Vector3(0,1,0), rotateAngle);
    if ( pressed['D'] )
      sphere.rotateOnAxis(new THREE.Vector3(0,1,0), -rotateAngle);
    if ( pressed['R'] )
      sphere.rotateOnAxis(new THREE.Vector3(1,0,0), rotateAngle);
    if ( pressed['F'] )
      sphere.rotateOnAxis(new THREE.Vector3(1,0,0), -rotateAngle);
  }
  </code></pre>
  
  <p>And the code to follow the sphere each tick of time:</p>
  
  <pre><code>function moveCamera() {
    var relativeCameraOffset = new THREE.Vector3(0,50,200);
    var cameraOffset = relativeCameraOffset.applyMatrix4(sphere.matrixWorld);
    camera.position.x = cameraOffset.x;
    camera.position.y = cameraOffset.y;
    camera.position.z = cameraOffset.z;
    camera.lookAt(sphere.position);
  }
  </code></pre>
  
  <p>Is there an easy way to make the ball roll without making the camera spiral all over the place? Inside of the <code>if (pressed['W'])</code> block, I tried various permutations of <code>sphere.rotateOnAxis(new THREE.Vector3(0,0,1), rotateAngle);</code> but haven't found a natural way to make the ball roll. I would be very grateful for any advice others can offer on this!</p>