Skip to main content

Underground 3D model rendering settings

Suitable for loading and displaying underground 3D models. When this parameter is turned on, the opaque material model will be rendered before the translucent surface to achieve the correct 3D space effect. However, the rendering performance in this mode will be affected to a certain extent.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Underground 3D model rendering settings</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%;
        }

        .btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
            color: #000000;
            font-weight: bold;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
     <div id="btn" class="btn">
        <button onclick="setRenderPassSync(true)">Open rendering settings</button>
        <button onclick="setRenderPassSync(false)">Close</button>
    </div>
    <div id="map"></div>
    <script>

        let modelLayer;
        let map = new mapmost.Map({
            container: 'map', 
            style: '<your style url>',
            center: [120.67287475351259, 31.320097198762696],
            zoom: 16.035248396661892, 
            pitch: 62.48725112156906, 
            bearing: -66.90626584095008, 
            userId: '***',
        });

        map.on('load', function () {
            let models_obj = ["./DFZM.glb"].map(item => ({
                type: 'glb',
                url: item
            }));

            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj,
                center: [120.67727020663829, 31.31997024841401, -20],
                callback: function (group, layer) {
                    modelLayer = layer;
                }
            };

            map.addLayer(options);
        })

        function setRenderPassSync(value) {
            modelLayer.setRenderPassSync(value);
        }

    </script>
</body>
</html>