如何在mapbox中添加离线三维城市白色模型

Question

我想使用mapbox -gl.js在mapbox中添加离线3D城市白色模型。例如：https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings demo这些数据格式是什么？(.shp?.obj?...)我可以使用Three.js加载这些模型数据吗？

Answer 1

是的，你绝对可以！看看https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/吧。

它加载一个glTF模型，但您可以加载THREE.js支持的任何内容，包括obj文件。

Answer 2

我建议您查看最新版本的threebox，因为它使您能够用几行代码完成下面的工作

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';

var origin = [2.294514, 48.857475];

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-v9',
    center: origin,
    zoom: 18,
    pitch: 60,
    bearing: 0
});

map.on('style.load', function () {

    map
        .addLayer({
            id: 'custom_layer',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, mbxContext) {

                window.tb = new Threebox(
                    map,
                    mbxContext,
                    {
                        defaultLights: true,
                    }
                );

                // import tower from an external glb file, downscaling it to real size
                // IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
                // otherwise you'll receive a 404 error
                var options = {
                    obj: '/3D/eiffel/eiffel.glb',
                    type: 'gltf',
                    scale: 0.01029,
                    units: 'meters',
                    rotation: { x: 0, y: 0, z: 0 }, //default rotation
                    adjustment: { x: -0.5, y: -0.5, z: 0 } // place the center in one corner for perfect positioning and rotation
                }

                tb.loadObj(options, function (model) {

                    model.setCoords(origin); //position
                    model.setRotation({ x: 0, y: 0, z: 45.7 }); //rotate it

                    tb.add(model);
                })

            },

            render: function (gl, matrix) {
                tb.update();
            }
        });
})

</script>

- 3D模型内置和自定义动画

​

​

-全光线投射支持鼠标移过/移出、选中、拖放、拖放、旋转、线框

​

​

-考虑高度的CSS2D工具提示和标签

​

​

**- Three.js和Mapbox摄像头同步深度调整**

​

​

-包括古迹的地理定位模型

​

​