三维场景散射雾设置
可以模拟现实中大气散射雾的效果,提升场景真实度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>散射雾</title>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.4.0/mapmost-webgl-min.js"></script>
<script src='./dat.gui.js'></script>
</head>
<body>
<div id='map'></div>
<script>
var gui = new dat.GUI();
var map = new mapmost.Map({
style: "<your style url>",
container: 'map',
center: [120.67617982483154, 31.317070971395978],
zoom: 16.011081413474614,
bearing: -128.8049986576308,
pitch: 82,
userId: '***', // 授权码
});
map.on("load", function () {
let models_obj = [
"<your model url>"
].map(item => ({
type: 'glb',
url: item,
}));
let options_obj = {
id: 'model_id',
type: 'model',
models: models_obj,
center: [120.7461498, 31.3307914, 0.2],
project: "3857",
callback: function (group, layer) {
// 初始化散射雾并添加至场景中
let pvFog = mapmost.PostProcessStageLibrary.initScatterFog(map);
map.addPostProcess(pvFog);
let fog = {
"maxDis": 1143.7,
"fogIndensity": 1,
"fogColor": [
255,
255,
255
],
"yellow": [
255,
255,
255
],
"enabled": true,
}
// 太阳位置
pvFog.sunDir = [1, 0.5, 0.0]
let guiFog = gui.addFolder('散射雾');
// 最大距离
guiFog.add(fog, "maxDis").min(0).max(3000).step(0.1).onChange(function (value) {
pvFog.maxDis = value;
});
// 散射雾强度
guiFog.add(fog, "fogIndensity").min(0).max(10).step(0.1).onChange(function (value) {
pvFog.fogIndensity = value;
});
// 雾的颜色
guiFog.addColor(fog, 'fogColor').onChange(function (value) {
pvFog.fogColor = [value[0] / 255, value[1] / 255, value[2] / 255];
});
// 散射颜色
guiFog.addColor(fog, 'yellow').onChange(function (value) {
pvFog.yellow = [value[0] / 255, value[1] / 255, value[2] / 255];
});
// 开启/关闭散射雾
guiFog.add(fog, "enabled").onChange(function (value) {
pvFog.enabled = value;
});
}
};
map.addLayer(options_obj);
});
</script>
</body>
</html>