Three.js 补间问题：起始值始终保持不变答案

【问题标题】：Three.js Tweening issue: start value always remains the sameThree.js 补间问题：起始值始终保持不变
【发布时间】：2020-08-31 06:17:02
【问题描述】：

我在补间我的 camera.position 时遇到问题。我用最少的代码创建了一个 codepen，只是为了重现我的问题，并注释了我的所有代码。我还放了很多 console.log() 用于调试目的。

Codepen

起点是我的camera.postion

camera.position.z = 30;

还有我的 tween001

    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"});

所以补间即将把我的相机从 Z = 30 移动到 Z = 60

它工作得很好但是......当用户移动/移动/单击3d时移动相机时，它的火和事件监听器暂停“tween001.pause（）”我希望tween001使用“实际”相机.postion 而不是当补间 001 着火时使用的 camera.postion 。

因为当 tween001 再次播放或从暂停中恢复时，使用的起点是默认的 x=0 y=0 z=30 。

一个空闲函数再次播放 tween001

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

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

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

【问题讨论】：

对不起我的英语（顺便说一句我是法国人^^）
我能看到的最简单的解决方案是每次你想触发它时创建一个新的补间，而不是在开始时创建一个补间并播放它。
GreenSock 论坛上的相同问题：greensock.com/forums/topic/25358-threejs-and-gsap-tween-update

标签： javascript three.js gsap tween

【解决方案1】：

因此，您必须了解 GSAP 假定它是唯一控制 camera.position 的东西。因此，当您声明 gsap.to(camera.position, {z: 60}) 时，它将在内部存储起始位置 (30) 和结束 (60) 以构建其时间线。它不知道你已经用鼠标滚轮改变了 z 位置，所以当你调用.play() 时，它仍然会假设你想从 30 转到 60。

你需要做的是每次重新初始化一个新的补间，所以当你想重播它时它必须查找起始位置：

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

请注意，我在函数外部声明了var tween001，在全局范围内，因此您仍然可以在需要时调用tween001.pause()
改变位置时无需更新投影矩阵。

现在，当您准备好再次开始动画时，您可以调用 doTween() 而不是使用tween001.play()，它会构建一个新的时间轴，重新读取相机的当前 z 位置以开始动画：

// ...
else if (idlecounter == timeout) {
    doTween();
    idlecounter = 0;
}

see here for the updated codepen

【讨论】：