title: Unable to Tween ThreeJS Camera Rotation
body: <p>I'm trying to animate the ThreeJS camera rotation using TweenJS, I have no problem tweening the camera.position, but for some reason camera.rotation refuses to change?</p>
  <p>I've setup a minimal example using the code from the official ThreeJS documentation: <a href="https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene" rel="nofollow noreferrer">https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene</a></p>
  <p>Basically it boils down to how this works fine:</p>
  <p><code>new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()</code></p>
  <p>while this doesn't work at all:</p>
  <p><code>new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start()</code></p>
  <p>I think the code should be pretty self explanatory:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  
  camera.position.z = 5;
  
  var animate = function () {
    requestAnimationFrame( animate );
  
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  
    renderer.render( scene, camera );
    
    TWEEN.update(); // NOTE: I added this too
  };
  
  animate();
  
  // NOTE: I added this:
  // In a few seconds, tween the camera rotation
  setTimeout(() =&gt; {
    const newRot = {x: 1, y: 1, z: 1};
  
    console.log('Changing camera rotation from:');
    console.log(camera.rotation);
    console.log('to:');
    console.log(newRot);
  
    new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start().onComplete(() =&gt; {
      // Note that it doesn't change at all?
      console.log('Camera rotation changed:');
      console.log(camera.rotation);
      
      // Manually setting the rotation works fine??
      console.log('Manually changing camera rotation:');
      camera.rotation.x = newRot.x;
      camera.rotation.y = newRot.y;
      camera.rotation.z = newRot.z;
    });
    
    // Tweening the position is no problem??
    const newPos = {x: 0, y: 0, z: 2};
    
    new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()
  }, 5000);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin: 0; }
  canvas { width: 100%; height: 100% }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://threejs.org/build/three.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>