// the find
RodrigoHamuy/react-three-map
Use React and Three.js inside Mapbox and Maplibre
A bridge library that lets you drop react-three-fiber scenes directly into Mapbox or Maplibre maps, handling camera sync, raycasting, and pointer events between the two render worlds. The core problem it solves is real — the official Maplibre docs show ~80 lines of imperative boilerplate to add a single Three.js object, and this reduces that to a `<Canvas lat={} lng={}>` wrapper. Aimed at devs building 3D data-viz on maps: building extrusions, animated markers, point clouds at real-world coordinates.
The coordinate system abstraction is genuinely well thought out — `<Coordinates>` and `NearCoordinates` give you an escape hatch for city-level vs country-level precision tradeoffs, and the docs are honest about where NearCoordinates breaks down at distance. Camera sync between the map projection matrix and the Three.js camera is the hardest part of this problem, and they've hidden it entirely behind the Canvas component. The overlay mode for postprocessing is a pragmatic design — two canvases with documented tradeoffs is better than one canvas with subtle blending bugs. IFC model loading in the stories shows it can handle real architectural data, not just hello-world cubes.
`vector3ToCoords` is documented as broken at non-city distances with no timeline for a fix (issue #102 is referenced but unresolved), which means any workflow that needs bidirectional coordinate conversion at scale hits a wall. The split between `react-three-map` and `react-three-map/maplibre` import paths is a footgun — you get a runtime error, not a type error, if you mix them, and the README's inline comment approach (`// import { Canvas } from 'react-three-map'`) is easy to miss. 316 stars is thin for a library this deep in the dependency stack; if the maintainer goes quiet, you're holding a fork. Several removed R3F Canvas props (`camera`, `dpr`, `orthographic`) are just silently ignored rather than throwing, which will waste hours when someone wonders why their `dpr` prop isn't doing anything.