Awesome
: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 :
How to use
Installation
Tailwind is the default style. styled-components (styled) are also available.
yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts?
# npx create-r3f-app next my-app
:passport_control: Typescript
For typescript add the parameter -ts
or --typescript
:
yarn create r3f-app next my-app -ts
# npx create-r3f-app next my-app -ts
:mount_fuji: Features
- GLSL imports
- Canvas is not getting unmounted while navigating between pages
- Canvas components usable in any div of the page
- Based on the App directory architecture
- PWA Support
:bullettrain_side: Architecture
Thanks to tunnel-rat the starter can portal components between separate renderers. Anything rendered inside the <View/>
component of the starter will be rendered in the 3D Context. For better performances it uses gl.scissor to cut the viewport into segments.
<div className='relative'>
<View orbit className='relative sm:h-48 sm:w-full'>
<Dog scale={2} />
// Some 3D components will be rendered here
</View>
</div>
:control_knobs: Available Scripts
yarn dev
- Next devyarn analyze
- Generate bundle-analyzeryarn lint
- Audit code qualityyarn build
- Next buildyarn start
- Next start
⬛ Stack
create-r3f-app
– Command line tool to simplify the installation.threejs
– A lightweight, 3D library with a default WebGL renderer.@react-three/fiber
– A React renderer for Threejs on the web and react-native.@react-three/drei
- Optional – useful helpers for react-three-fiber@react-three/a11y
- Optional – Accessibility tools for React Three Fiberr3f-perf
- Optional – Tool to easily monitor react threejs performances.
How to contribute :
git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install