Skip to main content

Label the 3D model

Supports text annotation of 3D models.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Add annotations to 3D models</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%;
            color: #e4dada;
        }

        #div_roof {
            position: absolute;
            color: #000000;
            font-weight: 600;
            display: none;
            transform: translate(-50%, -50%);
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>
</head>

<body>
    <div id="map"></div>
    <div id="div_roof">Eastern Gate</div>
    <script>
        let divRoof = document.getElementById("div_roof");
        let group, intersectCube;
        let halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;
        let box, centerVector;

        let map = new mapmost.Map({
            container: 'map', 
            style: "<your style url>",
            center: [120.67727020663829, 31.31997024841401],
            zoom: 14.907143631939364,
            pitch: 59.48725112156901,
            bearing: -54.10626584095007,
            userId: '***', // Authorization code
            env3D: {
                defaultLight: true,
                exposure: 2.8,
                envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr'
            }
        });
        map.on('load', function () {

            let models_obj = ["../jinji_plaza_eastern_door_building.glb"].map(item => ({
                type: 'glb',
                url: item
            }));
            let options = {
                id: 'model_id',
                type: 'model',
                models: models_obj,
                center: [120.67727020663829, 31.31997024841401],
                transPosition(position, MoveUpY) {
                    // World coordinates->standard coordinates->screen coordinates
                    let world_vector = new mapmost.THREE.Vector3(position.x, position.y, position.z); // Represents world coordinates
                    let vector = world_vector.project(camera);// Convert world coordinates to standard coordinates
                    if (MoveUpY) { vector.add(MoveUpY) }
                    return {
                        x: Math.round(vector.x * halfWidth + halfWidth),//Convert standard coordinates to screen coordinates
                        y: Math.round(-vector.y * halfHeight + halfHeight)
                    };
                },
                funcRender: function () {
                    if (group) {
                        divRoof.style.display = 'block'
                        let roofCoordinate = this.transPosition(intersectCube.getWorldPosition(new mapmost.THREE.Vector3()))
                        divRoof.style.left = roofCoordinate.x + "px";
                        divRoof.style.top = roofCoordinate.y + "px";
                    }
                },
                callback: (function (group1, layer) {
                    group = group1;

                    box = new mapmost.THREE.Box3();
                    box.expandByObject(group.children[0].clone())
                    centerVector = new mapmost.THREE.Vector3()
                    box.getCenter(centerVector)
                    //Create a new Mesh
                    let intersectGeo = new mapmost.THREE.BoxGeometry(10, 10, 1);
                    // Set to transparent
                    let intersectMaterial = new mapmost.THREE.MeshLambertMaterial({ color: "red", transparent: true, opacity: '0' });

                    intersectCube = new mapmost.THREE.Mesh(intersectGeo, intersectMaterial);
                    // (use x and y of the center of the geometry and z+50 of the largest point of the bounding box) to set the position of the Mesh
                    intersectCube.position.set(centerVector.x, centerVector.y, box.max.z + 50)

                    group.add(intersectCube);
                    camera = layer.tb.camera;
                }),
            };
            map.addLayer(options);

        })
    </script>
</body>

</html>