/react-three-next

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

Primary LanguageJavaScriptMIT LicenseMIT

Downloads Discord Shield

🏯 React-Three-Next starter

A minimalist starter for NextJS, @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. 3D components are usable anywhere in the dom. The events, dom, viewport, everything is synchronized!

⚫ Demo :

image

How to use

Installation

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

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

🛂 Typescript

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

yarn create r3f-app next my-app -ts

🗻 Features

  • GLSL imports
  • Canvas is not getting unmounted while navigating between pages
  • Canvas components usable in any div of the page
  • Based on the App directory architecture
  • PWA Support

🚄 Architecture

Thanks to tunnel-rat the starter can portal components between separate renderers. Anything rendered inside the <View/> component of the starter will be rendered in the 3D Context. For better performances it uses gl.scissor to cut the viewport into segments.

<div className='relative'>
  <View orbit className='relative sm:h-48 sm:w-full'>
    <Dog scale={2} />
    // Some 3D components will be rendered here
  </View>
</div>

🎛️ Available Scripts

  • yarn dev - Next dev
  • yarn analyze - Generate bundle-analyzer
  • yarn lint - Audit code quality
  • yarn build - Next build
  • yarn start - Next start

⬛ Stack

How to contribute :

git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install

Maintainers :