🏯 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

• [x] Automatically inject r3f component in the Canvas
• [x] Support glsl imports
• [x] PWA Support
• [x] Layout for Canvas and DOM
• [x] Template for the meta data and header
• [x] Clean code using ESlint, Prettier and Husky
• [x] VSCode debug profiles for the server, Chrome, and Firefox

🚄 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 - Next dev
• yarn analyze - Generate bundle-analyzer
• yarn lint - Audit code quality
• yarn build - Next build
• yarn start - Next start
• yarn export - Export to static HTML

⬛ 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
• @react-three/a11y – Accessibility tools 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.
• @three-material-editor – Tool to easily edit the shaders of your threejs materials.

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