You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
π 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
π» 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
π 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.
<divclassName='relative'><VieworbitclassName='relative sm:h-48 sm:w-full'><Dogscale={2}/>
// Some 3D components will be rendered here
</View></div>
ποΈ 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 β 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.