三 js + GSAP - 渲染器颜色过渡答案

【问题标题】：three js + GSAP - Renderer Color Transition三 js + GSAP - 渲染器颜色过渡
【发布时间】：2023-03-03 05:44:18
【问题描述】：

我正在尝试使用 gsap 进行简单的颜色转换，修改渲染器颜色（背景）

问题是，从黑色到白色的过渡效果很好，但是当我尝试从白色到黑色的过渡时，它只是改变颜色而没有任何过渡，只是从白色切换到黑色而没有任何褪色。

这是从黑到白的代码：

gsap.to(renderer,{setClearColor:'rgba(255,255,255,1)', duration: 2});

这是从白色到黑色的一种（我尝试了这两种可能性，所有可能的颜色输入（十六进制、rgb、rgba 等），有和没有新的 THREE.Color ）：

gsap.fromTo(renderer,{setClearColor: new THREE.Color( '#ffffff' )},{setClearColor:new THREE.Color( '#000000' ), duration: 2});

还有这个：

gsap.to(renderer,{setClearColor:'rgba(0,0,0,1)', duration: 2});

就好像值被缓存到了 rgb(0,0,0)，所以它只是从 rgb(0,0,0) 过渡到 rgb(0,0,0)

【问题讨论】：

【解决方案1】：

没关系，解决了。

对于可能遇到此特定（大声笑）问题的任何人，以下是解决方法：

似乎renderer.clearcolor 和scene.background 在RGB 中有从0 到1 的颜色，所以：

gsap.to(scene.background,{ r:1, g:1, b:1, duration: 2 })

和

gsap.to(scene.background,{ r:0, g:0, b:0, duration: 2 })

【讨论】：