跳到主要内容
版本：9.4.1

三维场景光晕设置

可以根据太阳位置设置场景的光晕效果，提升场景氛围感。

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.1/mapmost-webgl-min.js"></script>
  <script src='./dat.gui.js'></script>
</head>
<body>
  <div id='map'></div>
  <script>
    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: '***', // 授权码
    });

    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 pvGY = mapmost.PostProcessStageLibrary.initHaloSun(map);
          // 添加至场景
          map.addPostProcess(pvGY);
          // 强度
          pvGY.sunBrightness = 1;
          // 太阳位置
          pvGY.sunDir = [1, 0.5, 0.0];
          // 光晕颜色
          pvGY.sunColor = [0.5, 0.6, 0.7];
          // 开启关闭状态
          pvGY.enabled = true;
        }
      };
      map.addLayer(options_obj);
    });
  </script>
</body>
</html>