如何将在 mapbox 上的 Threejs 构建放到真正的位置

Question

目前我已经加载了埃菲尔铁塔 obj 文件，并使用 Threejs 渲染它，但是我如何将建筑物放在地图上到它在现实世界中的位置。我使用 mapgox-gl-js 来处理地图问题，因为它在 3d 地图上很方便。

style: {
    "version": 8,
    "sources": {
      "satellite": {
        "type": "raster",
        "url": "mapbox://mapbox.satellite",
        "tileSize": 256
      },
      "canvas": {
        type: 'canvas',
        canvas: 'idOfMyHTMLCanvas',
        // animate: true,
        coordinates: [
          [-74.02204952394804, 40.706782422418456],
          [-73.99115047610259, 40.706782422418456],
          [-73.99115047610259, 40.72021689994298],
          [-74.02204952394804, 40.72021689994298]
        ],
        contextType: 'webgl'
      }
    },
    "layers": [{
      "id": "satellite",
      "type": "raster",
      "source": "satellite"
    }, {
      "id": "video",
      "type": "raster",
      "source": "canvas"
    }]
}

感谢您的任何帮助。

Answer 1

您可能想查看Threebox，它旨在将 Three.js 场景图与 Mapbox GL JS 地图同步。

Answer 2

这个问题已经很老了，但确实按照@lauren-budorick的建议，我花了5分钟使用最新版本的Threebox来完成这个示例，结果是这样的

<script>
    mapboxgl.accessToken = 'PASTE HERE YOUR TOKEN';

    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>