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

我只是偶然发现了这个问题，并想为最终在这里的其他任何人提供最新的答案。在提出问题时，如果没有插件，在Mapbox GL JS中是不可能的，但是现在可以使用CustomLayerInterface来实现。

这里是example of adding a Three.js model to a Mapbox GL JS map。

Answer 3

这个问题已经很老了，但是确实是@ lauren-budorick所建议的，我花了5分钟时间来使用最新版本的threebox进行此示例，结果是这样的 < / p>

<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>

如何将mapj上的threejs放到真实的地方

3 个答案: