Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add r3f doc for community components #3378

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions docs/getting-started/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,81 @@ nav: 3
</li>
</Grid>

## R3F community components

### Repos and docs

This page showcases some React Three Fiber/r3f community components that have not been merged to the [drei](http://drei.docs.pmnd.rs) components collection or to another [pmndrs](https://github.com/pmndrs) project. If you'd like to list new community components, please make a PR to [this doc](https://github.com/pmndrs/react-three-fiber/tree/master/docs/getting-started/community-r3f-components.mdx) file.

#### Data sources

- Luma Labs [Gaussian Splats](https://cdn-luma.com/public/lumalabs.ai/luma-web-library/0.2/fefe154/index.html#react-three-fiber) renderer doc with demos
- [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS/) (r3f [wip readme](https://github.com/NASA-AMMOS/3DTilesRendererJS/tree/r3f-dev/src/r3f/README.md)) repo with doc
- [NYTimes/three-loader-3dtiles](https://github.com/nytimes/three-loader-3dtiles/blob/dev/examples/r3f/src/index.tsx) and [doc](https://nytimes.github.io/three-loader-3dtiles/)

#### Renderers & frameworks

- [Looking Glass](https://docs.lookingglassfactory.com/developer-tools/webxr/react-three-fiber) doc and demos
- [Theatre-js](https://github.com/theatre-js/theatre) repo and [doc](https://www.theatrejs.com/docs/latest)

#### Materials

- [FarazzShaikh/CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)
- [spite/THREE.MeshLine](https://github.com/spite/THREE.MeshLine)
- [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)
- [troika-three-text](https://github.com/protectwise/troika/tree/main/packages/troika-three-text)

#### Utilities

- [utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf)


### Codesandboxes and demos

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

[<Img src="https://raw.githubusercontent.com/NASA-AMMOS/3DTilesRendererJS/master/images/header-mars.png" alt="3DTilesRendererJS r3f demo" className="aspect-[16/9] object-cover" width="1763" height="926" />](https://nasa-ammos.github.io/3DTilesRendererJS/example/bundle/r3fDemo.html)
</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)

[<Img src="https://rd.nytimes.com/static/1ffcbe7f02d6168aecebdb7a84929dcf/1b9fc/7579e21f-3af0-46bb-a073-28c4a97594f9_Demo4.jpg" alt="three-loader-3dtiles r3f demo" className="aspect-[16/9] object-cover" width="1763" height="926" />](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="g97yzp" />
</li>
<li>
[Theatre-js](https://github.com/theatre-js/theatre)
<Codesandbox id="c6m9lj" screenshot_url="https://c6m9lj-3000.csb.app/thumbnail.jpg"/>
</li>
<li>
[FarazzShaikh/THREE-CustomShaderMaterial](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial)

[<Img src="https://external-preview.redd.it/yZVlNuTjk4jZU0dOcq3mtuQggLy04PmyOHsHTtoHaB0.png?format=pjpg&auto=webp&s=f65fcd78763ea8a6abd24773d767fa4012afa2f0" alt="THREE-CustomShaderMaterial r3f demo" className="aspect-[16/9] object-cover" width="1763" height="926" />](https://farazzshaikh.github.io/THREE-CustomShaderMaterial/#/caustics)
</li>
<li>
[utsuboco/r3f-perf](https://github.com/utsuboco/r3f-perf)
<Codesandbox id="ykfpwf" />
</li>
<li>
[spite/THREE.MeshLine](https://github.com/spite/THREE.MeshLine)
<Codesandbox id="lsvkqk" />
</li>
<li>
[ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare)

[<Img src="https://raw.githubusercontent.com/ektogamat/R3F-Ultimate-Lens-Flare/main/thumbnail.png" alt="R3F-Ultimate-Lens-Flare demo" className="aspect-[16/9] object-cover" width="1763" height="926" />](https://ultimate-lens-flare.vercel.app/)
</li>
</Grid>


## Game prototypes

<Grid>
Expand Down
Loading