Javascript （Three.JS）如何通过两种以上的颜色（三种颜色）循环/lerp？

我正在Three.JS在线编辑器中进行一个项目。 我想做一个昼夜循环。 它应该循环颜色，设置场景背景颜色，如下所示：

白天 日出/日落 夜 日出/日落 白天 ... 等等等等。， 它应该在这些地方循环，永远

我已经让它在两种颜色之间循环，但我似乎无法让它在所有三种颜色之间循环

有办法做到这一点吗？ 以下是我目前的代码：

//var day=新的三种颜色0xb8f4ff； //var Dawn=新的三种颜色0xFF571F； //var night=新的三种颜色0x17012D； //scene.background=new THREE.Color0xB8F4FF； 设t=0； 设tn=0； 设cyc=0； //const day=新的三种颜色0xb8f4ff； var day=新的三种颜色0xb8f4ff； const dashdawn=新的三种颜色0xFF571F； const night=新的三种颜色0x17012d； 使有生气 函数动画{ 请求动画帧动画； t+=0.01； tn+=0.01； cyc=0.9； cyc+=0.1； ifcyc%2==1{ //天=新的三种颜色0x17012D； day=新的三种颜色0xb8f4ff； //scene.background.copyday.lerpduskdawn，0.5*Math.sint+1； scene.background.copyday.lerpduskdawn，0.5*Math.sint+1； 天=新的三种颜色0x17012D； cyc+=0.1； ifcyc！=1{ 天=新的三种颜色0x17012D； } /**/ } ifcyc%2！=0{ //scene.background.copynight.lerpduskdawn，0.5*Math.sintn+1； //day=新的三种颜色0xb8f4ff； 天=新的三种颜色0x17012D； scene.background.copyday.lerpduskdawn，0.5*Math.sintn+1； //day=新的三种颜色0xb8f4ff； cyc+=0.1； //cyc=0； } /**/ cyc=0.9； cyc+=0.1； //cyc+=1； } 试着这样做：

让相机、场景、渲染器、时钟； 常量颜色=[ 新的三种颜色0xFF0000， 新的三种颜色0xFFFF00， 新的三种颜色0x00FF00， 新三色0x0000FF ]; 常数持续时间=4；//4s 初始化； 使有生气 函数初始化{ 摄像头=新的三个透视摄像头70，window.innerWidth/window.innerHeight，0.01,10； 摄像机位置z=1； 场景=新的三个场景； scene.background=新的三种颜色； 时钟=新的三个。时钟； renderer=new THREE.WebGLRenderer； renderer.setSizewindow.innerWidth，window.innerHeight； document.body.appendChildrender.doElement； } 函数动画{ 请求动画帧动画； 常量时间=clock.getElapsedTime； 动画背景时间 renderer.renderscene，摄影机； } 函数animateBackgroundt{ const f=Math.floorduration/colors.length； 常数i1=Math.floort/f%colors.length； 设i2=i1+1； 如果i2==colors.length i2=0； const color1=颜色[i1]； const color2=颜色[i2]； 常数a=t/f%颜色。长度%1； scene.background.copycolor1； scene.background.lerpcolor2，a； } 身体{ 保证金：0； } 试着这样做：

让相机、场景、渲染器、时钟； 常量颜色=[ 新的三种颜色0xFF0000， 新的三种颜色0xFFFF00， 新的三种颜色0x00FF00， 新三色0x0000FF ]; 常数持续时间=4；//4s 初始化； 使有生气 函数初始化{ 摄像头=新的三个透视摄像头70，window.innerWidth/window.innerHeight，0.01,10； 摄像机位置z=1； 场景=新的三个场景； scene.background=新的三种颜色； 时钟=新的三个。时钟； renderer=new THREE.WebGLRenderer； renderer.setSizewindow.innerWidth，window.innerHeight； document.body.appendChildrender.doElement； } 函数动画{ 请求动画帧动画； 常量时间=clock.getElapsedTime； 动画背景时间 renderer.renderscene，摄影机； } 函数animateBackgroundt{ const f=Math.floorduration/colors.length； 常数i1=Math.floort/f%colors.length； 设i2=i1+1； 如果i2==colors.length i2=0； const color1=颜色[i1]； const color2=颜色[i2]； 常数a=t/f%颜色。长度%1； scene.background.copycolor1； scene.background.lerpcolor2，a； } 身体{ 保证金：0； }

---

多好的把戏啊！：聪明而简单的解决方案！不幸的是，我不知道为什么，它似乎不想在ThreeJS编辑器中工作。当我尝试运行它时，它只是在左上角显示一个黑色矩形。你知道我能做些什么来解决这个问题吗？编辑：更新，我成功了，谢谢！。我选择了颜色作为背景类型，并添加了上述代码的一部分作为场景节点的新脚本。剧本是这样的：好的，谢谢。实际上我还有另一个问题，我试着使持续时间变长，它似乎只使第一种颜色的持续时间变长，而不是其他颜色。这是一个多么好的把戏啊！：聪明而简单的解决方案！不幸的是，我不知道为什么，它似乎不想在ThreeJS编辑器中工作。当我尝试运行它时，它只是在左上角显示一个黑色矩形。你知道我能做些什么来解决这个问题吗？编辑：更新，我成功了，谢谢！。我选择了颜色作为背景类型，并添加了上述代码的一部分作为场景n的新脚本

---

颂诗剧本是这样的：好的，谢谢。实际上我还有另一个问题，我试着使持续时间变长，似乎它只是使第一种颜色的持续时间变长，而不是其他颜色。