🏯 React-Three-Next starter

First Load JS of 78Kb. This starter will automatically pick the marked R3F components and inject them into a canvas layout so we can navigate seamlessly between the pages with some dynamic dom and canvas content without reloading or creating a new canvas every time.

⚫ Demo :

How to use

Installation

Tailwind is the default and only stable

yarn create r3f-app next my-app

or

npx create-r3f-app next my-app

🗻 Features

• Automatically inject r3f component in the Canvas
• Support glsl imports
• PWA Support
• Layout for Canvas and DOM
• Template for the meta data and header
• Clean code using ESlint, Prettier and Husky

🚄 Architecture

Inform the nextjs page that the component is a Threejs component. For that, simply add the r3f property to the parent component.

const Page = () => {
  return (
    <>
      <h1>Hello !</h1>
      {/* Simply add the r3f prop to the parent component -> */}
      <MeshComponent r3f />
    </>
  )
}

export default Page

🎛️ Available Scripts

• yarn dev - Use custom server to prevent crash in local
• yarn analyze - Generate bundle-analyzer
• yarn lint - Audit code quality
• yarn build - Inject node postinstall.js to prevent vercel to crash when deploy
• yarn start - Next start

⬛ Stack

• 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 – useful helpers for react-three-fiber
• tailwind – A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 directly in your markup.
• r3f-perf – Tool to easily monitor react threejs performances.

Why using a custom server in dev ?

Because next-transpile-module is pretty heavy while we are working in development, we use a custom server to supply node with the --max-old-space-size=4096 parameter which extend the basic limit of RAM (512mb) available to our server before it can crash. Otherwise, on heavy website we spend our time restarting the local server.

How to contribute :

git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install
# then push using the terminal to trigger Husky

Maintainers :

• twitter 🐈‍⬛ @onirenaud