{"repo":"RodrigoHamuy/react-three-map","free":true,"listed":false,"github":"https://github.com/RodrigoHamuy/react-three-map","clone":"git clone https://github.com/RodrigoHamuy/react-three-map.git","description":"Use React and Three.js inside Mapbox and Maplibre","language":"TypeScript","stars":317,"topics":["mapbox","maplibre","r3f","react-three-fiber","threejs","3d","map","react"],"license":"MIT","category":"game-templates","readme_excerpt":"React Three Map react-three-map is a bridge to use react-three-fiber inside react-map-gl . Until now you had: imperative declarative (react) --------------- ------------------- Maplibre/Mapbox react-map-gl THREE.js react-three-fiber Now with react-three-map , you can use them together :fist right::star::fist left:. - React Three Map - :book: Examples - :mag: What does it look like? - :thinking: Why we build this? - :gear: API - Canvas - Render Props - Render Props removed from @react-three/fiber - Coordinates - NearCoordinates - useMap - coordsToVector3 - vector3ToCoords :book: Examples Check out our examples here (powered by Ladle). :mag: What does it look like? Let's build the same react-three-fiber basic example, but now it can be inside a map. ( live demo ). 1. Import Canvas from react-three-map instead of @react-three/fiber . 2. Give it a latitude and longitude so it knows where to position the scene in the map. 3. Everything else should work just as usual. :thinking: Why we build this? Look how complex is to add just one ThreeJS object to a map. Look how complex is to create your custom root for R3F. You can now replace all that complexity and hundreds of lines of code with the component exported by react-three-map , which includes a tone of extra features and seamless integration, supporting pointer events, raycasting, and much more, all out of the box. :gear: API Canvas Same as in @react-three/fiber , the object is where you start to define your React Three Fiber Scen","default_branch":null,"files":null,"tree":[],"storefront":"/r/RodrigoHamuy","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/RodrigoHamuy/react-three-map/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}