Skip to main content

Model outline highlighting

Select the 3D model with the mouse to highlight the model outline.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Model outline highlighting</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/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        let map = new mapmost.Map({
            container: 'map', 
            style: '<your style url>', 
            center: [120.67099254440649, 31.318125115344017], position [lng, lat]
            zoom: 16.369, 
            pitch: 74.9999, 
            bearing: -104, 
            userId: '***', // Authorization code
            env3D: {
                envMap: '../../../../static/example_data/hdr/WhiteBG_Ref_1K.hdr',
                exposure: 1.2,
            },
            sky: 'light'
        });

        let modelLayer;
        map.on('load', function () {
            let models_obj_jjh = ["jinji_plaza_bridge", "jinji_plaza_bridge_upper", "jinji_plaza_eastern_door_building", "jinji_plaza_fence",
                "jinji_plaza_north_building", "jinji_plaza_star_vista", "jinji_plaza_surface", "jinji_plaza_suzhou_center", "jinji_plaza_w"
            ].map((item) => ({
                type: 'glb',
                url: '../../../../static/example_data/jjh_Scene_Y/' + item + '.glb',
            }));

            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj_jjh,
                center: [120.67727020663829, 31.31997024841401, 0.0],
                outline: true, // Allow outline highlighting
                callback: function (group, layer) {
                    modelLayer = layer;
                },
            };
            map.addLayer(options);

            map.on('click', function (e) {
                let intersect = modelLayer.selectModel(e.point)[0];
                if (intersect && intersect.point) {
                    // Highlight the selected model
                    modelLayer.outlineModel([intersect.object], {
                        scope: 'model', // Model outline scope: layer, model, default
                        edgeStrength: 3.0, // Contour strength coefficient
                        edgeGlow: 0.0, // outline glow dilution
                        edgeColor: '#0000ff', // outline color
                        enableFillColor: true, // Whether to fill the inside of the outline
                        fillColorOpacity: 0.2, // Fill color opacity inside the outline
                    });
                } else {
                    // Unhighlight the selected model
                    modelLayer.unOutlineModel();
                }
            });
        });
    </script>
</body>
</html>