Unable to Tween ThreeJS Camera Rotation

Question

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?

I've setup a minimal example using the code from the official ThreeJS documentation: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Basically it boils down to how this works fine:

new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()

while this doesn't work at all:

new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start()

I think the code should be pretty self explanatory:

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(() => {
  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(() => {
    // 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);

body { margin: 0; }
canvas { width: 100%; height: 100% }

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>

Answer 1

So for some reason what I had to do to fix this was instead of tweening camera.rotation directly, I created a temporary object oldRot, tweened that, and onUpdate of the tween set the camera.rotation to oldRot.

So, instead of this:

const newRot = {x: 1, y: 1, z: 1};

new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start();

I now have this:

const newRot = {x: 1, y: 1, z: 1};
const oldRot = {x: camera.rotation.x, y: camera.rotation.y, z: camera.rotation.z};

new TWEEN.Tween(oldRot).to(newRot).start().onUpdate(() => {
    camera.rotation.x = oldRot.x;
    camera.rotation.y = oldRot.y;
    camera.rotation.z = oldRot.z;
});

And for whatever reason this works. Would love to know why though if anyone knows.