使用ThingJS快速編寫天氣效果，比如：晴天、動(dòng)態(tài)時(shí)間天空、下雨、下雪（可以控制雨雪大?。?、霧效果、白天黑夜效果等，可以通過對接第三方的數(shù)據(jù)，實(shí)時(shí)控制三維場景的效果（比如：對接天氣接口）

動(dòng)態(tài)時(shí)間天空

天空的狀態(tài)會跟隨當(dāng)前時(shí)間點(diǎn)進(jìn)行變化，每個(gè)小時(shí)，太陽所在的位置都會不同，照射在場景上的影子方向也不同，通過動(dòng)態(tài)時(shí)間天空，我們就可以模擬現(xiàn)實(shí)生活中的一天24小時(shí)天空的變化

效果圖.png

下面我們來看一下實(shí)現(xiàn)代碼

/**
 * 晴天——?jiǎng)討B(tài)天空，跟隨小時(shí)變化
 * @param {Number} hour 小時(shí)
 */
sunny(hour) {
  const effect = {
    turbidity: 5, // 光源擴(kuò)散大小
    rayleigh: 2, // 大氣散射
    time: hour, // 時(shí)間 [0~24]
    beta: 30, // 水平角度
  };
  // 如果時(shí)間為下午19點(diǎn)，則變成黑夜效果；如果時(shí)間小于19點(diǎn)，則為動(dòng)態(tài)天空效果
  if (hour > 19) {
    this.app.skyEffect = null;
    this.app.skyBox = 'Night';
  } else {
    this.app.skyEffect = effect;
  }
}

上面的方法，我們只需要從外部傳入一個(gè)當(dāng)前時(shí)間即可，time的屬性值為Number類型，0-24的數(shù)值；下方做了一個(gè)判斷，如果是19點(diǎn)以后，就切換成黑夜的天空盒（這個(gè)可以根據(jù)自己的需求進(jìn)行邏輯更改）。

注意：skyEffect與skyBox不能同時(shí)使用，原因：它們都是針對天空效果進(jìn)行設(shè)置，只能選擇其一展現(xiàn)

動(dòng)態(tài)雨雪天氣

雨雪天氣，是通過粒子圖片渲染來實(shí)現(xiàn)的，我們可以通過控制粒子數(shù)量的多少來實(shí)現(xiàn)降雨降雪量

雨效果.png

下雨下雪.gif

下面我們來看一下實(shí)現(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();
 }

動(dòng)態(tài)霧效果

可以通過攝影機(jī)視角的遠(yuǎn)近，控制霧濃度，也可以更改霧顏色

霧效果.gif

下面我們來看一下實(shí)現(xiàn)代碼

/**
 * 動(dòng)態(tài)霧效果
 */
  fog(color) {
      this.app.fog = {
          color, // 顏色
          near: 10, // 近距離的霧效濃度
          far: 200 // 遠(yuǎn)距離的霧效濃度
      };
  }

  /**
   * 取消霧效果
   */
  offFog() {
      this.app.fog = null;
  }

API使用總結(jié)

// 設(shè)置動(dòng)態(tài)天空效果
const effect = {
    turbidity: 5, // 光源擴(kuò)散大小
    rayleigh: 2, // 大氣散射
    time: hour, // 時(shí)間 [0~24]
    beta: 30, // 水平角度
};
app.skyEffect = effect ;
// 取消動(dòng)態(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時(shí)，場景會卡頓）
particle.setGroupAttribute('maxParticleCount', 1000);
// 設(shè)置粒子的密度，當(dāng)設(shè)置了上限密度值時(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