如何在 mapbox 中添加离线 3D 城市白色模型答案

【问题标题】：How to add offline 3D city white model in mapbox如何在 mapbox 中添加离线 3D 城市白色模型
【发布时间】：2020-07-10 19:45:27
【问题描述】：

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

【问题讨论】：

标签： 3d mapbox

【解决方案1】：

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

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

【讨论】：

【解决方案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 模型内置和自定义动画

- 完整的光线投射支持 MouseOver/Mouseout、Selected、Drag&Drop、Drag&Rotate、Wireframe

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

**- Three.js 和 Mapbox 相机与深度调整同步 **

- 包括纪念碑的地理定位模型

【讨论】：