🏯 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
• 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
• 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.

next-transpile-modules

We override the module by transpiling only the three/examples/jsm to build faster and also to prevent JavaScript heap out of memory errors. If you have any issue related to transpilation you might need to tweak or remove the "match" condition in next.config.js

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