ThreeJS点击按钮调用TWEEN移动相机无效果无报错问题

你的相机补间动画不生效的核心原因是没有在逐帧渲染循环中调用TWEEN的更新方法。
TWEEN.js本身不会自动执行补间进度计算，必须在每一帧渲染前主动调用TWEEN.update()，库才会根据时间差计算当前帧的属性值、更新你绑定的camera.position数值。你当前的animate函数中仅更新了轨道控制器和执行渲染，完全没有触发TWEEN的状态推进，所以点击按钮后补间虽然被创建启动了，但永远停留在初始状态，相机位置不会发生任何变化，也不会抛出报错。

1. 修改渲染循环函数，补充TWEEN的逐帧更新逻辑，修改后的animate代码如下：

   var animate = function () {
       requestAnimationFrame( animate );
       TWEEN.update(); // 补全这行缺失的TWEEN更新调用
       controls.update();
       renderer.render(scene, camera);
   };
   

2. （可选优化）因为你使用了OrbitControls轨道控制器，相机移动到(200,200,200)位置后，如果出现视角偏移、看不到模型的问题，可以在补间中增加完成回调，重置控制器的观察目标到模型位置：

   button.addEventListener("click", function() {
       var tween1 = new TWEEN.Tween(camera.position)
       .to({
           x : 200,
           y : 200,
           z : 200
       } , 1000)
       .easing(TWEEN.Easing.Linear.None)
       .onComplete(() => {
           // 如果你加载的模型不在原点，把坐标换成模型实际位置即可
           controls.target.set(0, 0, 0);
           controls.update();
       })
       .start();
   });
   

• 你当前设置的透视相机远裁剪面距离为1000，目标位置z轴值为200，处于可视范围内，不需要调整相机参数；如果后续需要把相机移动到距离1000单位以外的位置，记得调大PerspectiveCamera的第四个参数（far值），否则会出现视锥裁剪看不到场景内容的问题。
• 确认页面已经正确引入TWEEN.js库文件，你当前控制台无报错，说明这部分配置正常，不需要额外调整。

内容的提问来源于stack exchange，提问作者DearBee