maptalks.mapboxgl加載 .dae 3D模型,攝像頭懸浮

拿到的是.skp 3d模型文件,下載SketchUp軟件.安裝后打開模型文件项阴，導(dǎo)出三維模型
image.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Add a 3D model</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <link type="text/css" rel="stylesheet" href="dist/maptalks.css">
    <script type="text/javascript" src="dist/maptalks.min.js"></script>
    <script src='dist/mapbox-gl.js'></script>
    <link href='dist/mapbox-gl.css' rel='stylesheet' />
    <script type="text/javascript" src="dist/maptalks.mapboxgl.js"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.1/mapbox-gl-language.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/loaders/ColladaLoader.js"></script>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1bGlwaWFvIiwiYSI6ImNqemtsbXZwdzBtNjAzZG9hOWt4Z21ocHUifQ.dsdPomNsO7w4Q-rRduoBcg';
    
    var baseLayer = new maptalks.MapboxglLayer('tile',{
        glOptions : {
            'style' : 'mapbox://styles/mapbox/dark-v9'
        }
    });
    
    var mapT = new maptalks.Map("map",{
        //limit max pitch to 60 as mapbox-gl-js required
        maxPitch : 60,
        center: [121.509758, 31.300800],
        zoom   :  16,
        pitch: 60,
        bearing: 10,
        baseLayer : baseLayer
    });
    var markers=[];//所有攝像頭
    let cameraWidth=15,cameraHeight=15,textSize=4;
     //根據(jù)層級來控制攝像頭大小
     mapT.on('zoomend',function(zoom){
        let temp=zoom.from-zoom.to;
        if(temp>0){
            temp=1.2*temp;
            cameraWidth=cameraWidth/temp;
            cameraHeight=cameraHeight/temp;
            textSize=textSize/temp;
        }else if(temp<0){
            temp=Math.abs(temp)*1.2;
            cameraWidth=cameraWidth*temp;
            cameraHeight=cameraHeight*temp;
            textSize=textSize*temp;
        }
        markers.forEach(function(g){
            g.updateSymbol({
            'markerWidth' : cameraWidth,
            'markerHeight' : cameraHeight,
            'textSize' : textSize
          });
        });
     });
     
     var layer=new maptalks.VectorLayer('vector',{
        enableAltitude : true,        // enable altitude
        altitudeProperty : 'altitude' // altitude property in properties, default by 'altitude'
      }).addTo(mapT);
      
      
      var marker1 = new maptalks.Marker(
        [121.510758, 31.301800],
        {
          symbol: 
          {
            'markerFile'   : 'dist/2.png',//攝像頭圖片
            'markerWidth'  : cameraWidth,
            'markerHeight' : cameraHeight,
            'markerDx'     : 0,
            'markerDy'     : 0,
            'markerOpacity': 1,
            'textFaceName' : 'sans-serif',
            'textName' : '{name}',
            'textSize' : textSize,
            'textDy'   : 3
          },
          properties : {
            altitude : 20,
            name:'攝像頭1'
          }
        }
      );
    markers.push(marker1);
    layer.addGeometry(markers);

    var map=baseLayer.getGlMap();
    mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
    map.addControl(new MapboxLanguage({
      defaultLanguage: 'zh'
    }));

    // parameters to ensure the model is georeferenced correctly on the map
    var modelOrigin = [121.509758, 31.300800];
    var modelAltitude = 0;
    var modelRotate = [Math.PI / 2, 0, 0];

    var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
        modelOrigin,
        modelAltitude
    );

    
    // transformation parameters to position, rotate and scale the 3D model onto the map
    var modelTransform = {
        translateX: modelAsMercatorCoordinate.x,
        translateY: modelAsMercatorCoordinate.y,
        translateZ: modelAsMercatorCoordinate.z,
        rotateX: modelRotate[0],
        rotateY: modelRotate[1],
        rotateZ: modelRotate[2],
        /* Since our 3D model is in real world meters, a scale transform needs to be
        * applied since the CustomLayerInterface expects units in MercatorCoordinates.
        */
        scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
    };

    var THREE = window.THREE;

    // configuration of the custom layer for a 3D model per the CustomLayerInterface
    var customLayer = {
        id: '3d-model',
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, gl) {
            this.camera = new THREE.Camera();
            this.scene = new THREE.Scene();

            // create two three.js lights to illuminate the model
            var directionalLight = new THREE.DirectionalLight(0xcccccc);
            directionalLight.position.set(0, -70, 100).normalize();
            this.scene.add(directionalLight);

            var directionalLight2 = new THREE.DirectionalLight(0xcccccc);
            directionalLight2.position.set(0, 70, 100).normalize();
            this.scene.add(directionalLight2);
            
            // use the three.js GLTF loader to add the 3D model to the three.js scene
            var loader = new THREE.ColladaLoader();
            loader.load('./models/collada/五角場.dae',
                function (gltf) {
                    this.scene.add(gltf.scene);
                }.bind(this)
            );
            this.map = map;

            // use the Mapbox GL JS map canvas for three.js
            this.renderer = new THREE.WebGLRenderer({
                canvas: map.getCanvas(),
                context: gl,
                antialias: true
            });
            this.renderer.autoClear = false;
        },
        render: function (gl, matrix) {
            var rotationX = new THREE.Matrix4().makeRotationAxis(
                new THREE.Vector3(1, 0, 0),
                modelTransform.rotateX
            );
            var rotationY = new THREE.Matrix4().makeRotationAxis(
                new THREE.Vector3(0, 1, 0),
                modelTransform.rotateY
            );
            var rotationZ = new THREE.Matrix4().makeRotationAxis(
                new THREE.Vector3(0, 0, 1),
                modelTransform.rotateZ
            );

            var m = new THREE.Matrix4().fromArray(matrix);
            var l = new THREE.Matrix4()
                .makeTranslation(
                    modelTransform.translateX,
                    modelTransform.translateY,
                    modelTransform.translateZ
                )
                .scale(
                    new THREE.Vector3(
                        modelTransform.scale,
                        -modelTransform.scale,
                        modelTransform.scale
                    )
                )
                .multiply(rotationX)
                .multiply(rotationY)
                .multiply(rotationZ);

            this.camera.projectionMatrix = m.multiply(l);
            this.renderer.state.reset();
            this.renderer.render(this.scene, this.camera);
            this.map.triggerRepaint();
        }
    };

    map.on('style.load', function () {
        map.addLayer(customLayer, 'waterway-label');
    });
</script>

</body>
</html>
效果圖:
image.png