Skip to main content

Batch model texture transformation

Realize batch modification and restoration of textures of 3D models constructed in automated batches based on number attributes. The model needs to be built automatically in large batches based on the prefabricated component modeling method. Please consult the research institute for the specific modeling process.

showshow

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Batch model texture transformation</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;
        }

        #info {
            color: white;
        }
    </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 class="btn-group">
        <button onclick="setTexture()">Set new texture</button>
        <button onclick="changeTextureOne()">Change texture 1</button>
        <button onclick="changeTextureTwo()">Change texture 2</button>
        <button onclick="recoveryTexture()">Recover texture</button>
        <div id="info"></div>
    </div>
    <script>
        let map = new mapmost.Map({
            container: 'map',           
            style: "<your style url>",  
            center: [120.7460708, 31.3059953],
            zoom: 17,
            pitch: 0,
            userId: '***', // Authorization code
            env3D: {
                exposure: 0.72,
                envMap: '../example_data/hdr/WhiteBG_Ref_1K.hdr'
            }
        });

        let modelLayer, seatChildren;
        map.on('load', function () {

            //Define the Olympic body model group
            let olympicModels = ["CX.glb", "F1.glb", "F2.glb", "F3.glb", "F4.glb", , "KT01.glb", , "KT02.glb"].map(item => ({
                type: 'glb',
                url: '../example_data/aoti_models/' + item
            }));

            //Define seat model group
            let seatModels = ["./Seat_A.glb", "./Seat_B.glb", "./Seat_C.glb", "./Seat_D.glb"].map(item => ({
                type: 'glb',
                url: '../example_data/Seat/' + item
            }));

            //Add model
            let options = {
                id: 'model_id',
                type: 'model',
                models: olympicModels,
                center: [120.744471002000068, 31.306768408000039, 3.617],
                project: "3857",
                callback: function (group, layer) {
                    modelLayer = layer;
                    layer.addModelMercator(seatModels, [120.7462978, 31.3067283, -4.4], function (seatChild) {
                        seatChildren = seatChild;
                    })
                }
            };
            map.addLayer(options);

            // Click on the seat to highlight it
            map.on('click', function (e) {
                let intersect = modelLayer.selectModel(e.point)[0];
                let options = {
                    intersect: intersect, // Get the model of mouse click
                    name: 'Seat', // Fuzzy query, query models whose names contain 'Seat'
                    faceCount: 4, //The number of triangles in each model, default 2
                    object: seatChildren, // Model object or model group, which can be used to quickly determine the level of the position.
                    texture: './images/highlight.png', // The texture map path highlighted by the model
                    // color: "#f20513", // Model highlight color, default "rgb(231,201,122)"
                }

                //Remove the highlight of the model
                modelLayer.unhighlightMergeBatchModel(options);

                // Based on the mouse click model picking result, realize efficient picking and highlighting of the model, and return the number attribute of the picked model
                let modelNum = modelLayer.highlightMergeBatchModel(options);

                // Output the number of the highlighted model
                document.getElementById("info").innerText = modelNum;
            })
        })

        //Set new texture
        function setTexture() {

            // Set new textures for models Seat_A, Seat_B, Seat_C, Seat_D (if there is only a single model, no loop is needed)
            for (let i = 0; i < 4; i++) {
                let optionColor = {
                    textureData: {
                        texture1: [0, 2],
                        texture2: [1, 1],
                        texture3: [0, 1]
                    },
                    size: [4, 4],
                    textureUrl: "./images/texture" + i + ".png",
                    faceCount: 4,
                    model: seatChildren.children[i]
                }
                modelLayer.setTextureRules(optionColor);
            }
        }

        // Transform texture 1
        function changeTextureOne() {
            let data1 = [];
            let data2 = [];
            let data3 = [];

            // Since the number of seat models A, B, C, and D are all greater than 3000, select a random number of seats within this number.
            for (let i = 0; i < 500; i++) {
                data1.push(i);
                data2.push(i + 1000);
                data3.push(i + 2000);
            }

            // Replace new textures for the selected seat models A, B, C, and D respectively
            for (let i = 0; i < 4; i++) {
                let option = {
                    model: seatChildren.children[i],
                    data: {
                        texture1: data1,
                        texture2: data2,
                        texture3: data3,
                    }
                }
                modelLayer.changeModelTexture(option);
            }
        }

        // Transform texture 2
        function changeTextureTwo() {
            let data1 = [];
            let data2 = [];
            let data3 = [];

            // Since the number of seat models A, B, C, and D are all greater than 3000, select a random number of seats within this number.
            for (let i = 0; i < 1000; i++) {
                data1.push(i);
                data2.push(i + 1000);
                data3.push(i + 2000);
            }

            // Replace new textures for the selected seat models A, B, C, and D respectively
            // If the number of seat models selected in transformation texture 1 is not selected, the color of the model seat will remain unchanged.
            for (let i = 0; i < 4; i++) {
                let option = {
                    model: seatChildren.children[i],
                    data: {
                        texture1: data2,
                        texture2: data1,
                        texture3: data3,
                    }
                }
                modelLayer.changeModelTexture(option);
            }
        }

        //Restore texture
        function recoveryTexture() {
            //Restore the textures of seat models A, B, C, and D in sequence
            for (let i = 0; i < 4; i++) {
                modelLayer.recoveryModelTexture(seatChildren.children[i])
            }
        }

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