Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

tween camera movement around globe three.js and tween.js

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

like image 650
Bob Haslett Avatar asked Dec 24 '22 13:12

Bob Haslett


1 Answers

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();
}
like image 111
Komsomol Avatar answered Jan 17 '23 22:01

Komsomol