Three.js and Gsap tween update

[cidwings]

Hi !

I have a problem for tweening my camera . I create a codepen with the minimum of code just to reproduce my issue and I annotate all my code (sorry for my English I'm french by the way ^^ ) I also put a lot of console.log() for debugging purpose .

the question is at line 75-122

 

the start point is my camera.postion line 23 : 

 

camera.position.z = 30;

and my tween001 line 75 :

var tween001 = gsap.to(camera.position,{ delay:2,duration:5,z:60,onUpdate:function(){
    camera.updateProjectionMatrix();
    console.log("play");
  },onComplete:function(){
    console.log("complete");
  },ease:"elastic"
  });

so the tween is about to move my camera from the Z = 30 to Z = 60 

 

its work perfectly but ... When the user move the camera(line 90: when the user move/over/click on the 3d its fire and eventlistener that pause "tween001.pause()"  )  I want the tween001 use the "actual" camera.postion and not when the camera.postion used when the tween 001 get fire .

 Cause when the tween001 is played again or it resume from a pause the start point used is the default one x=0 y=0 z=30 .

An idle function  play the tween001 again at line 109

window.setInterval(checkTime, 1000);// every 1 second lauch checktime

  function checkTime() { //idleCounter get 1 every second and at 5 second coz timeout is 5 checktime relauch the tween001
    if (idlecounter < timeout) {
      idlecounter++;

      //console.log("++ ");
    } else if (idlecounter == timeout) {
      tween001.play();
      console.log('timeout');
    }
  }

 

Any help will be welcome 

 

See the Pen PoNjVvL?editors=0011 by cid-wings-the-encoder (@cid-wings-the-encoder) on CodePen

[ZachSaucier]

Hey cidwings and welcome to the GreenSock forums.

 

Often times when you're trying to do these sorts of animations it is helpful to animate two different layers instead of just one to reduce conflict. In other words you could animate a container/group and an element (in this case the camera) inside of it. So you could create a group, put the camera inside of it, animate the position of the camera using either the tween or the user input, and animate the group's position using the other one. That way they could both run, even at the same time, and there'd never be an issue. Does that make sense?

 

Alternatively you could not use a group and just create a tween that affects the camera's position using relative values (like z:"+=60") once the user input has stopped.