时间戳

首页 > 解决方案 > 三 js + GSAP - 渲染器颜色过渡

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

问题描述

我正在尝试使用 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)

标签： javascriptcssanimationthree.jsgsap

解决方案

没关系，解决了。

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

看起来，renderer.clearcolor并且在 RGB 中具有从到的scene.background颜色，所以：01

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

和

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

推荐阅读