我使用的Cloud是6.1版本,天气支持调节光照,雨,雪,雾。
组合了晴天、阴天、雨、小雨、雪、雾。
需要注意的是,这个雾目前好像不支持自动消失,使用时需要配合计时器使用。
先通过免费API获取天气信息getWeather() { AMap.plugin("AMap.Weather", function () { var weather = new AMap.Weather(); weather.getLive("重庆", function (err, data) { if (!err) { this.weather = data.weather; } }); }); },
设置监听方法,在打开页面时自动调整天气。
这个方法只是实例,可根据选用的API的返回信息自行调整。
setWeather() { switch (true) { case this.weather.includes("雨" && "小"): console.log("小雨") this.rain_s() break; case this.weather.includes("雨"): console.log("雨") this.rain() break; case this.weather.includes("阴"): console.log("晴天") this.windy() break; default: console.log("一般天气") this.normalWeather() break; } watch: { weather(newVal, oldVal) { const interval = setInterval(() => { if (__g) { clearInterval(interval); setTimeout(() => { this.setWeather(newVal) }, 1000); } }, 1500); } },
设置天气,需要注意雨雪需要先设置云,雾不会自己消散需要配合计时器,通过设置雾的参数 fogHeightFalloff 可将雾效果关闭。,这里提供一些配置的参数,仅供参考。
setAmbientLight(intensity) { //环境光强度,取值范围:[0~5] __g.weather.setAmbientLightIntensity(intensity) }, setCloud(density, thickness, height) { //设置云层的密度[0~1.0] //云厚度取值范围:[0~0.5] //云高度[0~20]km __g.weather.setCloudDensity(density) __g.weather.setCloudThickness(thickness) __g.weather.setCloudHeight(height) }, setSun(intensity, size, temperature) { //!!!rain()和snow()禁止调用!!! //太阳光照射强度,取值范围:[0~40] //太阳尺寸,取值范围:[0~10] //色温值,单位:开尔文,简称K,取值范围:[1700~12000] __g.weather.setSunIntensity(intensity) __g.weather.setSunSize(size) __g.weather.setTemperature(temperature) }, fog(n) { this.isRainOrSnow() this.setAmbientLight(1) /* * 雾的浓度,取值范围:[0~2.0] * 雾的颜色 * 高度衰减,取值范围:[0~2] * 起雾距离,取值范围:[0~10000] * 透明度,取值范围:[0.00~1.00] * */ let fogDensity = 2; let fogColor = 'RGB(136,134,134)' let fogHeightFalloff = n let fogStartDistance = 50 let fogOpacity = 0.5 __g.weather.setFogParam(fogDensity, fogColor, fogHeightFalloff, fogStartDistance, fogOpacity) }, rain() { this.fog(2) this.setAmbientLight(3) this.setCloud(1, 0.1, 15) __g.weather.setSunSize(0) __g.weather.setMoonSize(0) //雨效强度,取值范围:[0~1.0] //雨效速度,取值范围:[0~1.0] //雨滴大小,取值范围:[0~1.0] let strength = 0.7; let speed = 0.5; let raindropSize = 0.7; __g.weather.setRainParam(strength, speed, raindropSize) }, rain_s() { this.fog(2) this.setAmbientLight(3) this.setCloud(1, 0.1, 15) __g.weather.setSunSize(0) __g.weather.setMoonSize(0) //雨效强度,取值范围:[0~1.0] //雨效速度,取值范围:[0~1.0] //雨滴大小,取值范围:[0~1.0] let strength = 0.4; let speed = 0.2; let raindropSize = 0.3; __g.weather.setRainParam(strength, speed, raindropSize) }, snow() { this.fog(2) this.setAmbientLight(3) this.setCloud(1, 0.1, 15) __g.weather.setSunSize(0) __g.weather.setMoonSize(0) //雪效强度,取值范围:[0~1.0] //雪效速度,取值范围:[0~1.0] //雪花大小,取值范围:[0~1.0] let strength = 0.1; let speed = 0.1; let snowflakeSize = 0.5; __g.weather.setSnowParam(strength, speed, snowflakeSize) }, sunny() { this.fog(2) this.isRainOrSnow() this.setAmbientLight(2) this.setCloud(0.5, 0.3, 5) this.setSun(10, 2, 5500) }, windy() { this.fog(2) this.isRainOrSnow() this.setAmbientLight(1) this.setCloud(1, 0.5, 15) this.setSun(5, 1, 5500) }, isRainOrSnow() { let data = {} __g.weather.getParams().then( (result) => { data = result; } ) if (data.rainsnow !== 0) { __g.weather.disableRainSnow() } }, normalWeather() { this.fog(2) this.isRainOrSnow() this.setAmbientLight(2) this.setCloud(1, 0.4, 10) this.setSun(7, 1, 5500) },
方法从上到下分别是:设置环境光,设置云,设置太阳,雾,雨,小雨,雪,晴天,阴天,是否是雨或雪,其他天气。
调整天气参数,主要开始看环境光强度和阴影效果,阴影的设置我这台电脑配置不高就没尝试。雨雪效果不宜过大或过快,影响对模型建筑的实际视觉,古人都讲究适宜,所以一点点就可以看出很nice的效果。