4

Trying to get a camera to smoothly rotate around a globe to a new position when a button is pressed. I'be done proof of position with the following to check the coordinates are OK

camera.position.set(posX,posY,posZ);
camera.lookAt(new THREE.Vector3(0,0,0));

However when I do the following to try to get it to tween nothing moves. Seems the .onupdate isn't being called and I can't figure out what I've done wrong

var from = {
        x : camera.position.x,
        y : camera.position.y,
        z : camera.position.z
      };

      var to = {
        x : posX,
        y : posY,
        z : posZ
      };
      var tween = new TWEEN.Tween(from)
      .to(to,600)
      .easing(TWEEN.Easing.Linear.None)
      .onUpdate(function () {
        camera.position.set(this.x, this.y, this.z);
        camera.lookAt(new THREE.Vector3(0,0,0));
      })
      .onComplete(function () {
        camera.lookAt(new THREE.Vector3(0,0,0));
      })
      .start();

Any help appreciated

Bob Haslett
  • 961
  • 1
  • 10
  • 31

1 Answers1

10

Did you add TWEEN.update() in your animate function? Because your code does work. See fiddle. http://jsfiddle.net/Komsomol/r4nctoxy/

function animate() {
    TWEEN.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    controls.update();
}
Komsomol
  • 698
  • 10
  • 27
  • Thank you for the example. If the camera is rotated when the tween begins, the camera will jump at the end of the animation. – illogical Aug 08 '18 at 14:20