跳到主要内容
版本:9.4.0

三维场景泛光设置

可以设置场景的泛光效果。

show
<!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,
sky: "light",
userId: '<your style url>',
});

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) {

var bloomOpt = {
"threshold": 0.14576818149708398,
"strength": 0.022488738764063924,
"radius": 0.03363881111471168,
"enabled": true
}

let guiBloom = gui.addFolder('泛光');

// 光照强度阈值
guiBloom.add(bloomOpt, "threshold").min(0).max(1).step(0.1).onChange(function (value) {
bloomOpt.threshold = value;
map.setBloomEffect(bloomOpt.enabled, bloomOpt);
});

// 泛光强度
guiBloom.add(bloomOpt, "strength").min(0).max(2).step(0.1).onChange(function (value) {
bloomOpt.strength = value;
map.setBloomEffect(bloomOpt.enabled, bloomOpt);
});

// 泛光半径
guiBloom.add(bloomOpt, "radius").min(0).max(1).step(0.1).onChange(function (value) {
bloomOpt.radius = value;
map.setBloomEffect(bloomOpt.enabled, bloomOpt);
});

// 关闭/开启泛光
guiBloom.add(bloomOpt, "enabled").onChange(function (value) {
bloomOpt.enabled = value
map.setBloomEffect(value, bloomOpt);
});
}
};
map.addLayer(options_obj);
})
</script>
</body>
</html>