🏯 React-Three-Next starter

A minimalist starter for React, 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.

⚫ Demo :

How to use

Installation

Tailwind is the default style. styled-components (styled) is also available.

yarn create r3f-app next my-app
# yarn create r3f-app <next> my-app <tailwind|styled>? -ts?

or

npx create-r3f-app next my-app

🛂 Typescript

For typescript add the parameter -ts or --typescript:

yarn create r3f-app next my-app -ts

or

npx create-r3f-app next my-app -ts

📝 Note:

Regarding the new layout system in next@13:

While the app directory is still in beta we are still investigating on the layout implementation, but for now it's more stable to use pages. An alternative branch will be available in the near future with the app directory architecture. It will be accessible through the starter CLI. Contribution is welcome Follow the progress of layout implementation here.

🗻 Features

• GLSL imports
• Template for meta data and header
• Clean code using ESlint and Prettier
• VSCode debug profiles for the server, Chrome, and Firefox
• PWA Support

🚄 Architecture

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

export default function Page(props) {
  return <div>Hello !</div>
}
// Canvas contents go here
// It will receive same props as Page component (from getStaticProps, etc.)
Page.canvas = (props) => (
  <mesh>
    <boxGeometry />
    <meshBasicMaterial color='hotpink' />
  </mesh>
)

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

• 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 && yarn install

Maintainers :

• twitter 🐈‍⬛ @onirenaud