(Three.JS)如何在超过两种颜色(三种颜色)之间循环/渐变?

3
我正在Three.JS在线编辑器上进行一个项目。 我试图制作一个白天/黑夜循环。 它应该循环显示颜色,设置场景的背景颜色,就像这样:
1. 白天 2. 日出/日落 3. 黑夜 4. 日出/日落 5. 白天 ... 等等,等等,
而且它应该永远循环下去。
我已经成功让它循环两种颜色,但是似乎无法让它循环三种颜色。
有没有办法做到这一点? 以下是我的代码:

//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;
}

任何帮助都将不胜感激。
如果有人需要更多信息,请告诉我!
谢谢!
1个回答

4

可以这样尝试:

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>


1
聪明而简单的解决方案! - M -
我选择了COLOR作为背景类型,并将上述代码的部分添加为Scene节点的新脚本。脚本如下所示:https://jsfiddle.net/rnuL051z/ - Mugen87
好的,谢谢。实际上我还有另一个问题,我尝试将持续时间延长,但似乎只有第一种颜色的持续时间变长了,其他颜色没有变长。 - Fox GAMING_NTF
我想做的是让所有颜色的持续时间都延长,而不仅仅是第一个颜色。 - Fox GAMING_NTF
应该工作吗?我所做的只是改变了持续时间常量。 我尝试过使用那个,但似乎无法适应让它在这里工作。你提供的代码效果要好得多,我只需要放慢它的速度。 - Fox GAMING_NTF
显示剩余3条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接