(Three.JS)如何loop/lerp通过两种以上的颜色（三种颜色）？

Question

我正在 Three.JS 在线编辑器中处理一个项目。我正在尝试制作日/夜循环。它应该遍历颜色，设置场景背景颜色，如下所示：

天
Sunrise/Sunset
晚上
Sunrise/Sunset
天 ... 等等等等,

它应该循环遍历这些，直到永远。

我已经让它遍历两种颜色，但我似乎无法让它遍历所有三种颜色。

有办法吗？到目前为止，这是我的代码：

//var day = new THREE.Color(0xB8F4FF);
//var duskdawn = new THREE.Color(0xFF571F);
//var night = new THREE.Color(0x17012D);

//scene.background = new THREE.Color(0xB8F4FF);

let t = 0;
let tn = 0;
let cyc = 0;

//const day = new THREE.Color(0xB8F4FF);
var day = new THREE.Color(0xB8F4FF);
const duskdawn = new THREE.Color(0xFF571F);
const night = new THREE.Color(0x17012D);

animate();

function animate() {

  requestAnimationFrame(animate);
  t += 0.01;
  tn += 0.01;
  cyc = 0.9;
  cyc += 0.1;
  if(cyc % 2 == 1){
      //day = new THREE.Color(0x17012D);
      day = new THREE.Color(0xB8F4FF);
      //scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));
      scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));
      day = new THREE.Color(0x17012D);
      cyc += 0.1;
      if(cyc != 1){
          day = new THREE.Color(0x17012D);
      }
  /**/
  }
  if(cyc % 2 != 0){
      //scene.background.copy(night).lerp(duskdawn, 0.5 * (Math.sin(tn) + 1));
      //day = new THREE.Color(0xB8F4FF);
      day = new THREE.Color(0x17012D);
      scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(tn) + 1));
      //day = new THREE.Color(0xB8F4FF);
      cyc += 0.1;
      //cyc = 0;
  }
  /**/
  cyc = 0.9;
  cyc += 0.1;
  //cyc += 1;
}

如有任何帮助，我们将不胜感激。

如果有人需要更多信息，请告诉我！

谢谢！

Answer 1

试试看：

let camera, scene, renderer, clock;

const colors = [
  new THREE.Color(0xff0000),
  new THREE.Color(0xffff00),
  new THREE.Color(0x00ff00),
  new THREE.Color(0x0000ff)
];

const duration = 4; // 4s

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  scene.background = new THREE.Color();

  clock = new THREE.Clock();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  const time = clock.getElapsedTime();

  animateBackground(time)

  renderer.render(scene, camera);

}

function animateBackground(t) {

  const f = Math.floor(duration / colors.length);
  const i1 = Math.floor((t / f) % colors.length);
  let i2 = i1 + 1;

  if (i2 === colors.length) i2 = 0;

  const color1 = colors[i1];
  const color2 = colors[i2];
  const a = (t / f) % colors.length % 1;

  scene.background.copy(color1);
  scene.background.lerp(color2, a);


}

body {
  margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.124/build/three.js"></script>

(Three.JS)如何loop/lerp通过两种以上的颜色（三种颜色）？

(Three.JS) How to loop/lerp through more than two colors (three colors)?

javascript

three.js

lerp