:japanese_castle: React-Three-Next starter

A minimalist starter for React, React-three-fiber and Threejs solving some of the problems that WebGL creates, for instance bundle size, canvas being its own black box without integration, and unloading/re-loading everything on route changes.

TTL ~ 100ms
First load JS ~ 85Kb
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. Context, routes and getStaticProps are all available inside the canvas, so that canvas contents can be swapped or react to routes.

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

npx create-r3f-app next my-app

:passport_control: Typescript

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

yarn create r3f-app next my-app -ts

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

:mount_fuji: Features

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

:bullettrain_side: 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>
)

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

pmndrs / react-three-next

V3 #95