Skip to main content

3D video projection

Load 3D video fusion layer to supportflvVideo stream access provides functions such as dynamic addition of video images, visible and hidden settings, viewpoint acquisition, and viewpoint positioning.

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>geoVideo</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/v9.1.0/mapmost-lite-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
    let map = new mapmost.Map({
        container: 'map', 
        style: "<your style url>",
        center: [120.744471002000068, 31.306768408000039],
        zoom: 17,
        pitch: 0,
        bearing: 0,
        userId: '***', // Authorization code,This parameter must be added
    });

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

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

        let options_obj = {
            id: 'model_id',
            type: 'model',
            models: models_obj,
            exposure: 1.2,
            center: [120.744471002000068, 31.306768408000039, 3.617],
            project: "3857",
            callback: function (group, layer) {
                Layer = layer;
            }
        };
        map.addLayer(options_obj);

        //Load projected reference model
        let models_geo = ["ATModelNew.glb"].map(item => ({
            type: 'glb',
            url: "../example_data/aoti_models/" + item
        }));
        let cameraData=[{
            "Name": "F3east sideA2Step platform",
            "VideoUrl": "<your url>",
            "Videotype": 2,
            "CameraPosX": -343457.618849196,
            "CameraPosY": -93846.8703323383,
            "CameraPosZ": 0.457726845648722,
            "Heading": -2.24654808420246,
            "Pitch": 1.03925376404804,
            "Roll": -0.0218598685855692,
            "Fov": 1.50652016356649,
            "Aspect": 1.77777777777778,
            "Near": 5,
            "Far": 60,
            "ZThreshold": 0.005,
            "Width": 1920,
            "Height": 1080,
            "factor": 1.0,
            "units": 1.0,
            "cameraModel": 12,
            "k1": -2.2131957798274708073e-07,
            "k2": 0,
            "u0": 960,
            "v0": 540,
            "depthTest": false
        }]
        let data = cameraData[0]
        let _cameraData = [{
            name: data.Name,
            position: [data.CameraPosX, data.CameraPosY, data.CameraPosZ],
            heading: data.Heading,
            pitch: data.Pitch,
            roll: data.Roll,
            width: data.Width,
            height: data.Height,
            fov: data.Fov,
            near: data.Near,
            far: data.Far,
            videoUrl: data.VideoUrl,
            zThreshold: data.ZThreshold,
            factor: data.factor,
            videoType: data.Videotype,
            cameraModel: data.cameraModel,
            k1: data.k1,
            k2: data.k2,
            u0: data.u0,
            v0: data.v0,
            depthTest: data.depthTest,
        }]
        let options = {
                id: 'model_id1',
                type: 'geoVideo',
                models: models_geo,
                exposure: 1.2,
                center: [120.744471002000068, 31.306768408000039, 3.617],
                project: "3857",
                cameraData: _cameraData,
                callback: function (geoVideo) {
                    GeoVideo = geoVideo;
                }
            }
        map.addLayer(options);

        map.on('click', function (e) {
            GeoVideo.setVideoCameraActiveByIndex(0, true);
            let _viewData = {
                position: [data.CameraPosX, data.CameraPosY, data.CameraPosZ],
                heading: data.Heading,
                pitch: data.Pitch,
                roll: data.Roll,
            }
            GeoVideo.setViewPoint(_viewData)
        })
    })
</script>
</body>
</html>