👁️ Preview Link
A starter template built with Vite for building 3D web applications using React Three Fiber and TypeScript with built-in GLSL support. This boilerplate provides everything you need to start creating immersive 3D experiences with React.
- ⚡️ Vite - Lightning fast development environment with instant HMR
- 🎨 React Three Fiber - React renderer for Three.js
- 🎁 Drei - Useful helpers and fully functional abstractions for R3F
- 🎬 Post Processing - Ready-to-use effects and post-processing setup
- 🎛️ Leva - Debug GUI controls for quick parameter tweaking
- 📦 TypeScript - Type safety and enhanced developer experience
- 🎯 GLSL Shader Support - Using vite-plugin-glsl for seamless shader imports
- 🔧 Hot Module Replacement - Instant feedback during development
- 🎮 Controls - Orbit controls preconfigured for scene navigation
- 📱 Responsive - Mobile-friendly and responsive design
This boilerplate is powered by:
- Vite - Next Generation Frontend Tooling
- vite-plugin-glsl - Import GLSL shaders as strings
- @react-three/drei - Collection of useful helpers and abstractions
- @react-three/postprocessing - Post-processing effects for React Three Fiber
- leva - React-first GUI controls for creative coding
- three-stdlib - Three.js standard library
Includes a complete shader example to get you started with GLSL in React Three Fiber. The example demonstrates:
- Vertex and fragment shader implementation
- Uniform and varying handling
- Time-based animations
- Post-processing implementation
# Clone the repository
git clone https://github.com/renoiser/r3f-vite-starter
# Install dependencies using npm or pnpm
npm install
pnpm install
# Start development server with npm or pnpm
npm run dev
pnpm dev
react-three-fiber typescript vite threejs r3f glsl shaders 3d webgl drei react postprocessing leva starter-kit boilerplate template vite-plugin-glsl three-stdlib