r3f-starter-kit

A polished React Three Fiber starter kit for public, remixable WebGL projects.

This repo is intentionally small: it gives you a working R3F scene, a tuned camera workflow, strict TypeScript, Tailwind CSS, Leva controls, GLSL imports, linting, formatting, and a Vite build without locking you into an application architecture.

What's included

• React 19, Vite, TypeScript, and React Three Fiber
• Drei primitives and controls
• Leva camera controls with a copy-to-clipboard export helper
• Tailwind CSS 4 via the Vite plugin
• GLSL imports through vite-plugin-glsl
• Strict TypeScript and ESLint configuration
• Prettier formatting

Getting started

pnpm install
pnpm dev

The dev server runs on http://localhost:3000.

Scripts

pnpm dev           # start Vite
pnpm build         # typecheck and build for production
pnpm preview       # preview the production build
pnpm lint          # run ESLint
pnpm typecheck     # run TypeScript project references
pnpm format        # format files with Prettier
pnpm format:check  # verify Prettier formatting
pnpm clean         # remove build and TypeScript cache output

Camera workflow

The camera rig lives in src/scene/CameraController.tsx, with persisted defaults in src/scene/cameraSettings.ts.

1. Run the app.
2. Frame the scene with OrbitControls or the Leva camera panel.
3. Click Copy camera settings in Leva.
4. Replace cameraSettings with the copied output.

Scene entry points

• src/App.tsx owns the page shell, <Canvas>, and overlay UI.
• src/scene/Scene.tsx owns the starter Three.js scene.
• src/scene/CameraController.tsx owns camera controls and export behavior.
• src/scene/shared/threeUniforms.ts is a small typed helper for shader uniforms.

Dependency note

Three is pinned to 0.182.0 so the current React Three Fiber runtime starts with a clean dev console. Revisit this pin when React Three Fiber replaces its internal THREE.Clock usage with THREE.Timer.

License

MIT. See LICENSE.