ThreeJS中Tween透明度动画无效果问题排查求助

核心问题 #

你的代码里缺少TWEEN动画的帧更新逻辑。TWEEN.js需要在每一帧调用TWEEN.update()来驱动动画进度，否则即使启动了tween实例，也不会有任何视觉变化。

修复步骤 #

1. 在animate函数中添加TWEEN.update()：

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update(); // 新增这行，触发TWEEN动画的帧更新
  renderer.render(scene, camera);
}
animate();

2. 额外优化（可选）：
   • 按钮样式的width属性缺少单位，改为width:100px才能正常显示按钮；
   • 模块脚本默认延迟执行，可直接移除window.onload，在脚本末尾直接获取按钮元素，代码更简洁。

关键修复后的代码片段 #

function animate() {
  requestAnimationFrame(animate);
  TWEEN.update(); // 必须添加的核心逻辑
  renderer.render(scene, camera);
}
animate();

无报错但动画不运行的原因 #

TWEEN实例已正确创建并启动，但没有触发每一帧的动画状态计算，导致透明度始终停留在初始值，控制台自然不会抛出错误。

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