Unable to Tween ThreeJS Camera Rotation Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Unable to Tween ThreeJS Camera Rotation without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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

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.

We are here to answer your question about Unable to Tween ThreeJS Camera Rotation - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji