Integration with/docs on react-three-fiber

[bergkvist]

Right now, we have:

imperative	declarative (react)
Mapbox GL JS	react-map-gl
THREE.js	react-three-fiber

Just as react-map-gl is the declarative react(ion) to Mapbox GL JS, react-three-fiber is the declarative reaction to THREE.js.

Mapbox GL JS has support for adding custom layers with THREE.js:
https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

It would be really cool with some examples/documentation on how react-map-gl could be used together with react-three-fiber.

Imagine being able to easily add a postprocessing effect to the map

function App() {
  return (
    <Canvas>
      <ReactMapGL />
      <BookehPostprocessingEffect />
    </Canvas>
  )
}

Or adding a custom 3d object

function App() {
  return (
    <Canvas>
      <ReactMapGL />
      <Custom3DObject />
    </Canvas>
  )
}

[ibgreen]

react-map-gl is designed to work seamlessly with deck.gl (which by the way does support GPU based post processing effects).

That said, if someone contributed good example on how to integrate with other 3D/WebGL libraries, I am sure it would be appreciated, but it would not be a priority for current maintainers.

[patrik-u]

Would love to see this as well.

[vincent-lecrubier-skydio]

I confirm, would love to see this, especially the ability to add custom 3d objects using react-three-fiber to mapbox gl stuff 👍

[hayk-skydio]

+1

[KevinGhadyani-Cityzenith]

This would greatly simplify needing to know a bunch of 3D stuff just to render pieces onto the map. Right now, you still need to know a lot about three.js to work with mapbox-gl.

[jo-chemla]

Same here ! Would allow us to embed massive 3d scans (up to ten billions of tris/pts primitives per scan) not only to a standard threejs scene via r3f (via loaders.gl tiled loader for 3d-tiles or potree) or nasa-3dtilesrenderer but also directly onto a map component for a seamless transition between the geospatial context and high-res 3d view

[RodrigoHamuy]

I built an NPM package called react-three-map to use react-three-fiber inside Mapbox/Maplibre the declarative way.

Even the README is inspired by this discussion thread 😅 .