跳到主要内容
版本：1.1.0

三维场景光设置

设置三维场景中的光源。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>三维场景光设置</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/lite/v1.1.0/mapmost-lite-min.js"></script>
    <script src="../../dist/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="map"></div>
<div class="btn-group">
    <input type="radio" name="light" value="light1" checked/> 环境光<br/>
    <input type="radio" name="light" value="light2"/> 点光源<br/>
    <input type="radio" name="light" value="light3"/> 聚光灯光源<br/>
    <input type="radio" name="light" value="light4"/> 平行光光源<br/>
    <input type="radio" name="light" value="light5"/> 半球光源<br/>
</div>
<script>
    let map = new mapmost.Map({
        container: 'map',
        style: "<your style url>",
        center: [120.71326014407373,31.3208050504757],
        zoom: 16,
        pitch: 60,
        userId: '***', // 授权码,此参数务必添加
    });

       let scene;
       let selectId = 'light1'
       let THREE = mapmost.THREE;
   
       map.on('load', function () {

           fetch('../example_data/3dbuildings_part.geojson').then(
               res => res.json()
           ).then(response => {
               let op = {
                   id: 'b',
                   type: 'buildings',
                   proj: '4326',
                   data: response,
                   images: ['../example_data/pic/top.png', '../example_data/pic/wall.png'],
                   defaultLights: false,
                   heightProp: 'ztykgd',
                   lights: [
                       {
                           id: 'light1',
                           type: 'ambient',
                           color: 0xccccff,
                           intensity: 2
                       }
                   ],
                   material: {
                       top: {
                           opacity: 0.8,
                           overdraw: true
                       },
                       wall: {
                           opacity: 0.8,
                           overdraw: true
                       }
                   },
                   callback: function (group, layer) {
                       scene = layer;
                   }
               };
               map.addLayer(op);
           })
   
           $("input[name='light']").change(function () {
               let selectId_ = $(this).val()
               if (selectId_ !== selectId) {
                   if (scene) {
                       scene.removeLight(selectId)
                       scene.addLight(getLightOption(selectId_));
                   }
                   selectId = selectId_;
               }
           });
       })
   
       function getLightOption(type) {
           let option;
           switch (type) {
               case 'light1':
                   option = {
                       id: 'light1',
                       type: 'ambient',//环境光
                       color: 0xccccff,//光源颜色
                       intensity: 2 //光线照射的强度
                   };
                   break;
               case 'light2':
                   option = {
                       id: 'light2',
                       type: 'point',//点光源
                       color: 0xffffff,//光源颜色
                       intensity: 2,//光线照射的强度
                       position: [0, 0, 0] //光源在场景中的位置
                   };
                   break;
               case 'light3':
                   option = {
                       id: 'light3',
                       type: 'spot',//聚光灯光源
                       color: 0xffffff,//光源颜色
                       intensity: 2,//光线照射的强度
                       position: [800, 0, 100],//光源在场景中的位置
                   };
                   break;
               case 'light4':
                   option = {
                       id: 'light4',
                       type: 'directional', //平行光/方向光
                       color: 0xffffff,//光源颜色
                       intensity: 2, //光线照射的强度
                       position: [800, 0, 100]  //一个位置，以该位置为起点，原点为终点的方向是光线的方向
                   };
                   break;
               case 'light5':
                   option = {
                       id: 'light5',
                       type: 'hemisphere', //半球光源
                       skyColor: 0xccccff,//从天空发出的光线的颜色
                       groundColor: 0xffcd2e, // 从地面发出的光线颜色
                       intensity: 2,  //光线照射的强度
                       position: [0, 50, 100] //光源在场景中的位置
                   };
                   break;
           }
           return option;
       }
</script>
</body>
</html>