使用ThingJS快速編寫天氣效果弓柱，比如：晴天沟堡、動態(tài)時間天空侧但、下雨、下雪（可以控制雨雪大泻铰蕖）禀横、霧效果、白天黑夜效果等伤哺，可以通過對接第三方的數(shù)據(jù)燕侠，實時控制三維場景的效果（比如：對接天氣接口）
動態(tài)時間天空
天空的狀態(tài)會跟隨當(dāng)前時間點(diǎn)進(jìn)行變化，每個小時立莉，太陽所在的位置都會不同绢彤，照射在場景上的影子方向也不同，通過動態(tài)時間天空蜓耻，我們就可以模擬現(xiàn)實生活中的一天24小時天空的變化
效果圖.png
下面我們來看一下實現(xiàn)代碼
/**
* 晴天——動態(tài)天空茫舶，跟隨小時變化
* @param {Number} hour 小時
*/
sunny(hour) {
const effect = {
turbidity: 5, // 光源擴(kuò)散大小
rayleigh: 2, // 大氣散射
time: hour, // 時間 [0~24]
beta: 30, // 水平角度
};
// 如果時間為下午19點(diǎn)，則變成黑夜效果刹淌；如果時間小于19點(diǎn)饶氏，則為動態(tài)天空效果
if (hour > 19) {
this.app.skyEffect = null;
this.app.skyBox = 'Night';
} else {
this.app.skyEffect = effect;
}
}
上面的方法，我們只需要從外部傳入一個當(dāng)前時間即可有勾，time的屬性值為Number類型疹启，0-24的數(shù)值；下方做了一個判斷蔼卡，如果是19點(diǎn)以后喊崖，就切換成黑夜的天空盒（這個可以根據(jù)自己的需求進(jìn)行邏輯更改）。
注意：skyEffect與skyBox不能同時使用雇逞，原因：它們都是針對天空效果進(jìn)行設(shè)置荤懂，只能選擇其一展現(xiàn)
動態(tài)雨雪天氣
雨雪天氣，是通過粒子圖片渲染來實現(xiàn)的塘砸，我們可以通過控制粒子數(shù)量的多少來實現(xiàn)降雨降雪量
雨效果.png
下雨下雪.gif
下面我們來看一下實現(xiàn)代碼
/**
* 下雨或者下雪效果
*/
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',
};
// 創(chuàng)建粒子
this.particle = this.app.create({
type: 'ParticleSystem', // 粒子類型
name: type, // 粒子名稱（可通過名稱進(jìn)行query查詢）
url: particleUrl[type], // 粒子圖片
position: [0, 50, 0], // 粒子世界坐標(biāo)
});
// 設(shè)置粒子最大密度
this.particle.setGroupAttribute('maxParticleCount', 1000);
this.particle.setParticleAttribute('particleCount', particleCount);
}
/**
* 改變雨雪粒子大小
*/
changeParticle(particleCount) {
// 設(shè)置粒子密度
this.particle.setParticleAttribute('particleCount', particleCount);
}
/**
* 取消雨雪效果
*/
offRainOrSnow(type) {
this.app.query(type)[0].destroy();
}
動態(tài)霧效果
可以通過攝影機(jī)視角的遠(yuǎn)近节仿，控制霧濃度，也可以更改霧顏色
霧效果.gif
下面我們來看一下實現(xiàn)代碼
/**
* 動態(tài)霧效果
*/
fog(color) {
this.app.fog = {
color, // 顏色
near: 10, // 近距離的霧效濃度
far: 200 // 遠(yuǎn)距離的霧效濃度
};
}
/**
* 取消霧效果
*/
offFog() {
this.app.fog = null;
}
API使用總結(jié)
// 設(shè)置動態(tài)天空效果
const effect = {
turbidity: 5, // 光源擴(kuò)散大小
rayleigh: 2, // 大氣散射
time: hour, // 時間 [0~24]
beta: 30, // 水平角度
};
app.skyEffect = effect ;
// 取消動態(tài)天空效果
app.skyEffect = null;
// 設(shè)置天空盒
app.skyBox = 'Night'; // 天空盒資源可以使用線上資源掉蔬，也可下載到本地廊宪，引入本地資源路徑
// 內(nèi)置天空盒值：BlueSky（藍(lán)天）、MilkyWay（銀河）女轿、CloudySky（多云）箭启、White（灰白）、Dark（暗黑）
// 自定義天空盒貼圖（要注意圖片寬高比例1:1谈喳，每張大小必須一致）
// 設(shè)置自定義天空盒方式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'
};
// 設(shè)置自定義天空盒方式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'
};
// 設(shè)置自定義天空盒方式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'
];
// 創(chuàng)建雨雪粒子，使用app.create()接口戈泼，創(chuàng)建類型為‘ParticleSystem’
// 設(shè)置粒子的最大密度婿禽，上限值（注意：當(dāng)數(shù)值達(dá)到10000時赏僧，場景會卡頓）
particle.setGroupAttribute('maxParticleCount', 1000);
// 設(shè)置粒子的密度，當(dāng)設(shè)置了上限密度值時扭倾，粒子數(shù)超過上限值淀零，展現(xiàn)出來的效果為上限密度的效果
particle.setParticleAttribute('particleCount', 100);
// 銷毀粒子對象
app.query('粒子name')[0].destroy();
// 霧效果
app.fog = {
color, // 顏色
near: 10, // 近距離的霧效濃度
far: 200 // 遠(yuǎn)距離的霧效濃度
};
// 取消霧效果
app.fog = null;
想要探討問題或者Demo示例代碼，請戳郵箱：1806798698@qq.com
