chiewm / react-three-next

React Three Fiber, Nextjs, Tailwind and Styled-components starter

🏯 React-Three-Next starter

Minimalist starter, First Load JS of 85Kb. 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 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

🗻 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 and Prettier
• 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 = (props) => {
  return (
    <>
      <div>Hello !</div>
      
    </>
  )
}
// canvas components goes here
// It will receive same props as Page component (from getStaticProps, etc.)
Page.r3f = (props) => (
  <>
    <Shader />
  </>
)

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