π― 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
π» 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 devyarn analyze
- Generate bundle-analyzeryarn lint
- Audit code qualityyarn build
- Next buildyarn start
- Next startyarn 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 Fiberr3f-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