🏯 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

Use this template

🗻 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.

<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>

🎛️ Available Scripts

• pnpm dev - Next dev
• pnpm analyze - Generate bundle-analyzer
• pnpm lint - Audit code quality
• pnpm build - Next build
• pnpm 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 Fiber
• r3f-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 && pnpm install

Maintainers :

• twitter 🐈‍⬛ @onirenaud