🏯 Next & React three fiber starter

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 :

https://r3f-next-starter.vercel.app/

How to use

Installation

Tailwind is the default

yarn create r3f-app next my-app <tailwind?>

or

npx create-r3f-app next my-app <tailwind?>

🗻 Features

• [x] Concurrent mode with React experimental
• [x] Automatically inject r3f component in the Canvas layout
• [x] Customizable loading
• [x] Support glsl, images and svg imports
• [x] PWA Support
• [x] Dynamic meta data and header using Helmet
• [x] 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 -> */}
      <Group r3f />
      <h2>Bonjour.</h2>
      <MeshComponent r3f />
    </>
  )
}

export default Page

🎛 Available Scripts

• yarn dev
• yarn lint (Scripts)
• yarn build
• yarn 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.
• Drei: A growing collection of useful helpers and abstractions 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.

How to contribute :

git clone https://github.com/RenaudRohlinger/r3f-next-starter
&& cd r3f-next-starter && yarn install
# then push using the terminal to trigger Husky

Contributors will be automatically added using allcontributors.org

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Joe Hsu 💻

Alaric.Baraou 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

More tool and r3f tips on my twitter @onirenaud