add 3D model with three.js example

[andrewharvey]

Launch Checklist

• briefly describe the changes in this PR

Adds an example for adding a 3D model to a Mapbox map using three.js. This is quite a common request and having an official example should help point people in the right direction.

Give we have https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/ this is probably enough to close #7330

To give credit where it's due, this example started off as @ansis's debug page, which was then developed by @andrewharvey into https://bl.ocks.org/andrewharvey/7b61e9bdb4165e8832b7495c2a4f17f7, which was further developed by @ryanbaumann into https://bl.ocks.org/ryanbaumann/b9725e79b5b1742d92ada00ddbf5c3d3, and finally further developed by @andrewharvey into this.

The 3D model included as an asset is public domain https://nasa3d.arc.nasa.gov/detail/jpl-vtad-dsn70 https://github.com/nasa/NASA-3D-Resources. I'm open to using something else if anyone has anything better, like a detailed skyscaper, but I think it's more important to get an official example than be held up by what it looks like.

• manually test the example page

[mourner]

This is great! The only thing I'm a bit bummed about is that it's 3+ MB to add to the repo, and it loads for a considerable amount of time before being displayed. Perhaps there's an easy way to simplify the mesh in the GLTF data?

[andrewharvey]

This is great! The only thing I'm a bit bummed about is that it's 3+ MB to add to the repo, and it loads for a considerable amount of time before being displayed. Perhaps there's an easy way to simplify the mesh in the GLTF data?

I agree that this example should use a minimal model, I'm more concerned about the load time of the example.

I've not been able to find a good sample model yet, I think it's better to at least get this example out there, and can follow up with a change of the model down the track to use something simpler.