how to put threejs building on mapbox to its real place

Question

currently i've load eiffel tower obj file, and render it using threejs, but how can i put the building on map to its place in real world. i use mapgox-gl-js to handle map issues, for its convenience on 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"
    }]
}

thank you for any help.

Answer 1

You may want to check out Threebox, which is designed to sync a Three.js scene graph with a Mapbox GL JS map.