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.
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-appFor typescript add the parameter -ts or --typescript:
yarn create r3f-app next my-app -ts- 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
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 Pageyarn dev- Next devyarn analyze- Generate bundle-analyzeryarn lint- Audit code qualityyarn build- Next buildyarn start- Next startyarn export- Export to static HTML
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.
git clone https://github.com/pmndrs/react-three-next
&& cd react-three-next && yarn install