-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add page for community components (#3378)
- Loading branch information
Showing
1 changed file
with
92 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| --- | ||
| title: Community R3F Components | ||
| description: 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. | ||
| nav: 4 | ||
| --- | ||
|
|
||
| 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. It showcases some r3f community components that have not been merged to to the [drei](http://drei.docs.pmnd.rs) components collection or to another [pmndrs](https://github.com/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](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 | ||
|
|
||
| - [NASA-AMMOS/3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS/) (r3f [readme](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/src/r3f/README.md)) repo with doc | ||
| - 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 | ||
| - [NYTimes/three-loader-3dtiles](https://nytimes.github.io/three-loader-3dtiles) | ||
|
|
||
| #### Renderers & frameworks | ||
|
|
||
| - Takram three-geospatial [clouds doc](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/clouds) and [demos](https://takram-design-engineering.github.io/three-geospatial/?path=/story/clouds-3d-tiles-renderer-integration--tokyo), and [atmosphere doc](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/atmosphere) | ||
| - [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) | ||
| - [pmndrs/THREE.MeshLine](https://github.com/pmndrs/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/r3f/basic.html) | ||
| </li> | ||
| <li> | ||
| [Takram three-geospatial clouds](https://github.com/takram-design-engineering/three-geospatial/tree/main/packages/clouds) | ||
|
|
||
| [<Img src="https://github.com/takram-design-engineering/three-geospatial/raw/main/packages/clouds/docs/london.jpg" alt="Takram three-geospatial clouds" className="aspect-[16/9] object-cover" width="1763" height="926" />](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) | ||
|
|
||
| [<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="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) | ||
|
|
||
| [<Img src="https://raw.githubusercontent.com/FarazzShaikh/THREE-CustomShaderMaterial/main/assets/waves-demo.png" alt="THREE-CustomShaderMaterial r3f demo" className="aspect-[16/9] object-cover" width="1763" height="926" />](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) | ||
|
|
||
| [<Img src="https://media.githubusercontent.com/media/takram-design-engineering/three-geospatial/main/packages/atmosphere/docs/manhattan.jpg" alt="Takram three-geospatial atmosphere" className="aspect-[16/9] object-cover" width="1763" height="926" />](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) | ||
|
|
||
| [<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> |