Community R3F Components - React Three Fiber

If you'd like to list new community components, please make a PR to this doc file. It showcases some r3f community components that have not been merged to the drei components collection or to another pmndrs project.

R3F community components

Repos and docs

This page showcases some React Three Fiber/r3f community components that have not been merged to the drei components collection or to another pmndrs project. If you'd like to list new community components, please make a PR to this doc file.

Data sources

NASA-AMMOS/3DTilesRendererJS (r3f readme) repo with doc
Luma Labs Gaussian Splats renderer doc with demos
NYTimes/three-loader-3dtiles

Renderers & frameworks

Takram three-geospatial clouds doc and demos, and atmosphere doc
Looking Glass doc and demos
Theatre-js repo and doc

Materials

Utilities

utsuboco/r3f-perf

Codesandboxes and demos

<Grid cols={3}> <li> [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS)

[](https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/r3f/basic.html)

</li> <li> [Takram three-geospatial clouds](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/clouds)

[](https://takram-design-engineering.github.io/three-geospatial/?path=/story/clouds-3d-tiles-renderer-integration--tokyo)

</li> <li> [Luma Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber) <Codesandbox id="h2fkgq" /> </li> <li> [NYTimes/three-loader-3dtiles](https://github.com/nytimes/three-loader-3dtiles/blob/dev/examples/r3f/src/index.tsx)

[](https://nytimes.github.io/three-loader-3dtiles/dist/web/examples/demos/realitycapture/)

</li> <li> [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber) <Codesandbox id="xzlmzz" screenshot_url="https://blog.lookingglassfactory.com/content/images/size/w2000/2024/05/LKG-32-Spatial-Display-Portrait-Cleopatra-1.jpg"/> </li> <li> [Theatre-js](https://github.com/theatre-js/theatre) <Codesandbox id="6xfrsv" screenshot_url="https://www.theatrejs.com/images/docs/0.5/manual/studio/ui.png" /> </li> <li> [Farazz/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)

[](https://farazzshaikh.github.io/THREE-CustomShaderMaterial/#/caustics)

</li> <li> [Takram three-geospatial atmosphere](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/atmosphere)

[](https://takram-design-engineering.github.io/three-geospatial/?path=/story/atmosphere-3d-tiles-renderer-integration--manhattan)

</li> <li> [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf) <Codesandbox id="ykfpwf" /> </li> <li> [pmndrs/THREE.MeshLine](https://github.com/pmndrs/meshline) <Codesandbox id="vl221" /> </li> <li> [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)

[](https://ultimate-lens-flare.vercel.app/)

</li> </Grid>