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

Question

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

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 map 同步。