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

2024-05-21 • 问答

补间我的camera.position时遇到问题。我用最少的代码创建了一个Codepen，只是为了重现我的问题，然后注释所有代码。我还放了很多console.log（）进行调试。

起点是我的相机位置

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

因此，您必须了解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()
更改位置时无需更新投影矩阵。

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

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

see here for the updated codepen

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

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

大家都在问