The repo is moving to https://github.com/pmndrs/react-three-next |
---|
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.
https://r3f-next-starter.vercel.app/
Tailwind is the default
yarn create r3f-app next my-app <tailwind?>
or
npx create-r3f-app next my-app <tailwind?>
- Concurrent mode with React experimental
- Automatically inject r3f component in the Canvas layout
- Customizable loading
- Support glsl, images and svg imports
- PWA Support
- Dynamic meta data and header using Helmet
- Clean code using ESlint, Prettier and Husky
Inform the nextjs page that the component is a Threejs component. For that, simply add the r3f property to the parent component.
const Page = () => {
return (
<>
<h1>Hello !</h1>
{/* Simply add the r3f prop to the parent component -> */}
<Group r3f />
<h2>Bonjour.</h2>
<MeshComponent r3f />
</>
)
}
export default Page
- yarn dev
- yarn lint (Scripts)
- yarn build
- yarn start
- Threejs: A lightweight, 3D library with a default WebGL renderer.
- React-three-fiber: A React renderer for Threejs on the web and react-native.
- Drei: A growing collection of useful helpers and abstractions for react-three-fiber.
- Tailwind: A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 directly in your markup.
- R3F-Perf: Tool to easily monitor react threejs performances.
git clone https://github.com/RenaudRohlinger/r3f-next-starter
&& cd r3f-next-starter && yarn install
# then push using the terminal to trigger Husky
Contributors will be automatically added using allcontributors.org
Thanks goes to these wonderful people (emoji key):
Joe Hsu ๐ป |
Alaric.Baraou ๐ป |
This project follows the all-contributors specification. Contributions of any kind welcome!
More tool and r3f tips on my twitter @onirenaud