ThingJS之动态天气效果

使用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