Three.js结合GSAP实现Renderer背景色过渡时白转黑无动画问题

问题原因 #

Three.js 中 WebGLRenderer.setClearColor 是方法而非可读写属性，GSAP 可以通过该方法完成赋值插值，但无法主动读取渲染器当前的实际背景色值，只会缓存首次传入的初始值。你首次黑转白动画正常是因为初始默认背景色为黑色，和 GSAP 缓存的初始值一致；反向过渡时 GSAP 仍然认为当前背景色为初始黑色，所以出现从黑到黑无动画的表现。

解决方案 #

方案1：直接操作渲染器内置颜色属性（最简写法） #

Three.js 渲染器内置 clearColor 属性为 THREE.Color 实例，其 r/g/b 分量为 0-1 范围的可读写数值，直接对该属性做插值即可：

// 黑转白动画
gsap.to(renderer.clearColor, { r: 1, g: 1, b: 1, duration: 2 });

// 白转黑动画
gsap.to(renderer.clearColor, { r: 0, g: 0, b: 0, duration: 2 });

// 若需要同时修改透明度，额外操作 clearAlpha 属性即可
gsap.to(renderer, { clearAlpha: 0.5, duration: 2 });

方案2：中间变量托管（兼容性更强） #

如果需要适配自定义颜色格式、多参数联动等场景，可以通过中间变量托管颜色值，GSAP 对中间变量做插值后在更新回调中手动赋值：

// 初始化时和当前背景色保持一致，这里用0-255的rgb格式举例
const bg = { r: 0, g: 0, b: 0 };
renderer.setClearColor(`rgb(${bg.r}, ${bg.g}, ${bg.b})`);

// 白转黑动画
gsap.to(bg, {
  r: 255,
  g: 255,
  b: 255,
  duration: 2,
  onUpdate: () => renderer.setClearColor(`rgb(${bg.r}, ${bg.g}, ${bg.b})`)
});

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