ThingJS之动态天气效果

使用ThingJS快速编写天气效果，比如：晴天、动态时间天空、下雨、下雪（可以控制雨雪大小）、雾效果、白天黑夜效果等，可以通过对接第三方的数据，实时控制三维场景的效果（比如：对接天气接口）

学习链接

ThingJS平台官网示例：https://www.thingjs.com/guide/?m=sample

ThingJS平台API文档：https://www.thingjs.com/guide/cn/apidocs/index.html

动态时间天空

天空的状态会跟随当前时间点进行变化，每个小时，太阳所在的位置都会不同，照射在场景上的影子方向也不同，通过动态时间天空，我们就可以模拟现实生活中的一天24小时天空的变化

下面我们来看一下实现代码

    /**
     * 晴天——动态天空，跟随小时变化
     * @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;
        }
    }

    /**
     * 取消动态天空
     */
    offSunny() {
        this.app.skyEffect = null;
        this.app.skyBox = null;
    }

上面的方法，我们只需要从外部传入一个当前时间即可，time的属性值为Number类型，0-24的数值；下方做了一个判断，如果是19点以后，就切换成黑夜的天空盒（这个可以根据自己的需求进行逻辑更改）。
注意：skyEffect与skyBox不能同时使用，原因：它们都是针对天空效果进行设置，只能选择其一展现

动态雨雪天气

雨雪天气，是通过粒子图片渲染来实现的，我们可以通过控制粒子数量的多少来实现降雨降雪量

下面我们来看一下实现代码

    /**
     * 下雨或者小雪效果
     */
    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,
            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();
    }

动态雾效果

可以通过摄影机视角的远近，控制雾浓度，也可以更改雾颜色

下面我们来看一下实现代码

    /**
     * 动态雾效果
     */
    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