gem-hunter
Language: JavaScript
React Three Fiber, Threejs, Nextjs starter
A minimalist starter for NextJS, @react-three/fiber and Threejs.
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!
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? # npx create-r3f-app next my-app
For typescript add the parameter -ts or --typescript:
yarn create r3f-app next my-app -ts
# npx create-r3f-app next my-app -tsThanks 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>
yarn dev - Next devyarn analyze - Generate bundle-analyzeryarn lint - Audit code qualityyarn build - Next buildyarn start - Next startcreate-r3f-app – Command line tool to simplify the installation.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