使用ThingJS快速编写天气效果，比如：晴天、动态时间天空、下雨、下雪（可以控制雨雪大小）、雾效果、白天黑夜效果等，可以通过对接第三方的数据，实时控制三维场景的效果（比如：对接天气接口）
动态时间天空
天空的状态会跟随当前时间点进行变化，每个小时，太阳所在的位置都会不同，照射在场景上的影子方向也不同，通过动态时间天空，我们就可以模拟现实生活中的一天24小时天空的变化
效果图.png
下面我们来看一下实现代码
/**
* 晴天——动态天空，跟随小时变化
* @param {Number} hour 小时
*/
sunny(hour) {
const effect = {
turbidity: 5, // 光源扩散大小
rayleigh: 2, // 大气散射
time: hour, // 时间 [0~24]
beta: 30, // 水平角度
};
// 如果时间为下午19点，则变成黑夜效果；如果时间小于19点，则为动态天空效果
if (hour > 19) {
this.app.skyEffect = null;
this.app.skyBox = 'Night';
} else {
this.app.skyEffect = effect;
}
}
上面的方法，我们只需要从外部传入一个当前时间即可，time的属性值为Number类型，0-24的数值；下方做了一个判断，如果是19点以后，就切换成黑夜的天空盒（这个可以根据自己的需求进行逻辑更改）。
注意：skyEffect与skyBox不能同时使用，原因：它们都是针对天空效果进行设置，只能选择其一展现
动态雨雪天气
雨雪天气，是通过粒子图片渲染来实现的，我们可以通过控制粒子数量的多少来实现降雨降雪量
雨效果.png
下雨下雪.gif
下面我们来看一下实现代码
/**
* 下雨或者下雪效果
*/
rainOrSnow(type, particleCount) {
this.app.skyBox = 'Night'; // 黑夜天空盒
const particleUrl = {
'雨': 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles',
'雪': 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles',
};
// 创建粒子
this.particle = this.app.create({
type: 'ParticleSystem', // 粒子类型
name: type, // 粒子名称（可通过名称进行query查询）
url: particleUrl[type], // 粒子图片
position: [0, 50, 0], // 粒子世界坐标
});
// 设置粒子最大密度
this.particle.setGroupAttribute('maxParticleCount', 1000);
this.particle.setParticleAttribute('particleCount', particleCount);
}
/**
* 改变雨雪粒子大小
*/
changeParticle(particleCount) {
// 设置粒子密度
this.particle.setParticleAttribute('particleCount', particleCount);
}
/**
* 取消雨雪效果
*/
offRainOrSnow(type) {
this.app.query(type)[0].destroy();
}
动态雾效果
可以通过摄影机视角的远近，控制雾浓度，也可以更改雾颜色
雾效果.gif
下面我们来看一下实现代码
/**
* 动态雾效果
*/
fog(color) {
this.app.fog = {
color, // 颜色
near: 10, // 近距离的雾效浓度
far: 200 // 远距离的雾效浓度
};
}
/**
* 取消雾效果
*/
offFog() {
this.app.fog = null;
}
API使用总结
// 设置动态天空效果
const effect = {
turbidity: 5, // 光源扩散大小
rayleigh: 2, // 大气散射
time: hour, // 时间 [0~24]
beta: 30, // 水平角度
};
app.skyEffect = effect ;
// 取消动态天空效果
app.skyEffect = null;
// 设置天空盒
app.skyBox = 'Night'; // 天空盒资源可以使用线上资源，也可下载到本地，引入本地资源路径
// 内置天空盒值：BlueSky（蓝天）、MilkyWay（银河）、CloudySky（多云）、White（灰白）、Dark（暗黑）
// 自定义天空盒贴图（要注意图片宽高比例1:1，每张大小必须一致）
// 设置自定义天空盒方式1
app.skyBox = {
up: './images/Night/posx.jpg',
rt: './images/Night/negx.jpg',
lf: './images/Night/posy.jpg',
fr: './images/Night/negy.jpg',
dn: './images/Night/posz.jpg',
bk: './images/Night/negz.jpg'
};
// 设置自定义天空盒方式2
app.skyBox = {
negx: './images/Night/negx.jpg',
negy: './images/Night/negy.jpg',
negz: './images/Night/negz.jpg',
posx: './images/Night/posx.jpg',
posy: './images/Night/posy.jpg',
posz: './images/Night/posz.jpg'
};
// 设置自定义天空盒方式3(顺序要求[posx, negx, posy, negy, posz, negz])
app.skyBox = [
'./images/Night/posx.jpg',
'./images/Night/negx.jpg',
'./images/Night/posy.jpg',
'./images/Night/negy.jpg',
'./images/Night/posz.jpg',
'./images/Night/negz.jpg'
];
// 创建雨雪粒子，使用app.create()接口，创建类型为‘ParticleSystem’
// 设置粒子的最大密度，上限值（注意：当数值达到10000时，场景会卡顿）
particle.setGroupAttribute('maxParticleCount', 1000);
// 设置粒子的密度，当设置了上限密度值时，粒子数超过上限值，展现出来的效果为上限密度的效果
particle.setParticleAttribute('particleCount', 100);
// 销毁粒子对象
app.query('粒子name')[0].destroy();
// 雾效果
app.fog = {
color, // 颜色
near: 10, // 近距离的雾效浓度
far: 200 // 远距离的雾效浓度
};
// 取消雾效果
app.fog = null;
想要探讨问题或者Demo示例代码，请戳邮箱：1806798698@qq.com
