Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pmndrs/react-three-next
React Three Fiber, Threejs, Nextjs starter
https://github.com/pmndrs/react-three-next
react react-three-fiber starter tailwind threejs webgl
Last synced: 27 days ago
JSON representation
React Three Fiber, Threejs, Nextjs starter
- Host: GitHub
- URL: https://github.com/pmndrs/react-three-next
- Owner: pmndrs
- License: mit
- Created: 2021-01-06T12:37:53.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-21T14:25:33.000Z (7 months ago)
- Last Synced: 2024-05-01T11:29:10.635Z (6 months ago)
- Topics: react, react-three-fiber, starter, tailwind, threejs, webgl
- Language: JavaScript
- Homepage: https://react-three-next.vercel.app/
- Size: 2.86 MB
- Stars: 2,217
- Watchers: 40
- Forks: 300
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-three-fiber - react-three-next
- awesome-webxr-development - React Three Next - badge] - A minimalist starter for Next.js, React Three Fiber and Three.js (and Tailwind and Styled-components) (Engine / Framework / General 3D App Framework)
README
[](https://www.npmjs.com/package/create-r3f-app) [](https://discord.gg/ZZjjNvJ)
# :japanese_castle: React-Three-Next starter
A minimalist starter for NextJS, @react-three/fiber and Threejs.
- TTL ~ 100ms
- First load JS ~ 79kb
- Lighthouse score of 100 (Performance, Accessibility, Best Practices, SEO)
This starter allows you to navigate seamlessly between pages with dynamic dom and/or canvas content without reloading or creating a new canvas every time. 3D components are usable anywhere in the dom. The events, dom, viewport, everything is synchronized!
### ⚫ Demo :
[](https://react-three-next.vercel.app/)
### How to use
#### Installation
_Tailwind is the default style. styled-components (styled) are also available._
```sh
yarn create r3f-app next my-app
# yarn create r3f-app my-app ? -ts?
# npx create-r3f-app next my-app
```
### :passport_control: Typescript
For typescript add the parameter `-ts` or `--typescript`:
```sh
yarn create r3f-app next my-app -ts
# npx create-r3f-app next my-app -ts
```
### :mount_fuji: Features
- [x] GLSL imports
- [x] Canvas is not getting unmounted while navigating between pages
- [x] Canvas components usable in any div of the page
- [x] Based on the App directory architecture
- [x] PWA Support
### :bullettrain_side: Architecture
Thanks to [tunnel-rat](https://github.com/pmndrs/tunnel-rat) the starter can portal components between separate renderers. Anything rendered inside the `` component of the starter will be rendered in the 3D Context. For better performances it uses gl.scissor to cut the viewport into segments.
```jsx
// Some 3D components will be rendered here
```
### :control_knobs: Available Scripts
- `yarn dev` - Next dev
- `yarn analyze` - Generate bundle-analyzer
- `yarn lint` - Audit code quality
- `yarn build` - Next build
- `yarn start` - Next start
### ⬛ Stack
- [`create-r3f-app`](https://github.com/utsuboco/create-r3f-app) – Command line tool to simplify the installation.
- [`threejs`](https://github.com/mrdoob/three.js/) – A lightweight, 3D library with a default WebGL renderer.
- [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) – A React renderer for Threejs on the web and react-native.
- [`@react-three/drei` - Optional](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber
- [`@react-three/a11y` - Optional](https://github.com/pmndrs/react-three-a11y/) – Accessibility tools for React Three Fiber
- [`r3f-perf` - Optional](https://github.com/RenaudRohlinger/r3f-perf) – Tool to easily monitor react threejs performances.
### How to contribute :
```bash
git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install
```
### Maintainers :
- [`twitter 🐈⬛ @onirenaud`](https://twitter.com/onirenaud)