我正在Three.JS在线编辑器上进行一个项目。
我试图制作一个白天/黑夜循环。
它应该循环显示颜色,设置场景的背景颜色,就像这样:
1. 白天 2. 日出/日落 3. 黑夜 4. 日出/日落 5. 白天 ... 等等,等等,
而且它应该永远循环下去。
我已经成功让它循环两种颜色,但是似乎无法让它循环三种颜色。
有没有办法做到这一点? 以下是我的代码:
任何帮助都将不胜感激。
如果有人需要更多信息,请告诉我!
谢谢!
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;
}
如果有人需要更多信息,请告诉我!
谢谢!
COLOR
作为背景类型,并将上述代码的部分添加为Scene
节点的新脚本。脚本如下所示:https://jsfiddle.net/rnuL051z/ - Mugen87