Mapbox-gl-js: Add support for rendering 3d models

[lucaswoj]

Continued from https://github.com/mapbox/DEPRECATED-mapbox-gl/issues/17

We are adding support for simple extrusions. For buildings, there are some complex and high-profile landmarks that can't be rendered accurately with simple extrusion:

_Haiii, Eiffel Tower._

For these features, it seems like we would want to include 3D models. How would/could this work? How much of a lift is this?

/cc @lbud @ajashton @mapbox/gl

cc @mourner @tmcw @jfirebaugh

[allthesignals]

My team is interested in learning more about the status of this feature - we are also in a place where simple extrusions will not work, and we have a wealth of 3d model data that we think would fit better inside our MapboxGL stack. Any chance there's direct access to the scene interface? Is a pathway for this related to https://github.com/mapbox/mapbox-gl-js/issues/6456? Thanks!

[lbud]

Any chance there's direct access to the scene interface? Is a pathway for this related to #6456?

Exactly @allthesignals, custom layers (#6456) will be the soonest you'll be able to accomplish this, and that feature will likely land ~this summer — native Mapbox GL support for 3D models isn't on our short- or medium-term roadmap at this time.

[allthesignals]

Thanks, @lbud - I'll keep an eye on this PR here: https://github.com/mapbox/mapbox-gl-js/pull/6124

[andrewharvey]

Over on the PR I posted some example code which helps place 3D models at given long, lats

https://github.com/mapbox/mapbox-gl-js/pull/7039#issuecomment-410621717

[allthesignals]

Fabulous - thanks @andrewharvey!

[andrewharvey]

I'll close this ticket given custom layers #7039 supports adding 3D models to a Mapbox GL JS map.

An official example will be followed up in #7330

3D terrain mesh is at #1489

[femski]

How can we use custom layer to display 3D terrain (by extruding raster DEM heights or something similar)? I had hoped for an example of that. But it seems its not possible at this time, correct ?

[Daandeve]

Is it possible to move the 3d object without re-importing the 3d model?

[andrewharvey]

Is it possible to move the 3d object without re-importing the 3d model?

@Daandeve Using the example at https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/, the render method is called each frame and it refers to the modelTransfom object. So if you update your the modelTransform object to a new location, the model will move on the next frame.

[andrewharvey]

How can we use custom layer to display 3D terrain (by extruding raster DEM heights or something similar)? I had hoped for an example of that. But it seems its not possible at this time, correct ?

@femski It is possible to build that yourself at the moment, I have implemented it, in a similar way to https://blog.mapbox.com/bringing-3d-terrain-to-the-browser-with-three-js-410068138357?, but I don't have the code to share as it's wrapped up in a whole application.

However you can see at https://blog.mapbox.com/taking-our-maps-to-the-next-dimension-dbeee37a7c4c Mapbox is working on adding this as an out of the box feature.

[Daandeve]

@andrewharvey Do you have a example?
I'am new to both mapbox and three.js. :)

[andrewharvey]

@andrewharvey Do you have a example?

@Daandeve sorry I don't.

[Daandeve]

Okay thanks!
I got it working.

[come25136]

@andrewharvey Hello,
Is there an example of adding multiple models to one custom layer and changing their coordinates?

I tried it myself, but I couldn't implement it well. :(

[jbixon13]

@Daandeve would you be able to share your approach?

[bvitlas]

I'm also very curious to add multiple gltf or .obj models to the map in a single custom layer. Can anyone give an example code.