Is it possible to integrate react-three-fiber with Mapbox GL JS?

[patrik-u]

I'd like to render 3-d objects on a map and Mapbox GL JS allows for rendering on their map through three js:

https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

But I'm not sure how to accomplish that through react-three-fiber. From their example it looks like you need to create a scene, camera and renderer that uses their Mapbox GL JS map canvas. Is this possible to do through react-three-fiber?

[patrik-u]

So Mapbox GL JS is set up with its own canvas and WebGLRenderer, is it possible to tell fiber to use that instead of its own?

[yerffejytnac]

Seconding this if anyone has found a solution, would love to hear it!

[piducancore]

This is not exactly what you're asking, but you can put GLTF models over a map (react-map-gl) using the ScenegraphLayer from deck.gl.

[EdSpurrier]

I am keen to hear if anyone has solved this as well.

[branberry]

I found this repository which uses react three fiber with Mapbox GL.

[RodrigoHamuy]

You can now use react-three-map to use react-three-fiber inside Mapbox/Maplibre.