Akdex / react-three-next

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

Home Page:https://react-three-next.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Downloads Discord Shield

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

image

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

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

How to contribute :

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

Maintainers :

About

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

https://react-three-next.vercel.app/

License:MIT License


Languages

Language:JavaScript 97.2%Language:GLSL 1.6%Language:CSS 1.3%