⚛️🤝3️⃣ Three.js + React Three Fiber Template

✨ See a live demo here

Features

• Pnpm
• TypeScript
• Vite
  • vite-tsconfig-paths
  • rollup-plugin-visualizer
• React 18
• Three.js
• React Three Fiber
  • drei
  • @react-spring/three
• Leva

Getting Started

1. Install deps

$ pnpm install

Expect a peer dependency version mismatch warning due to Leva not upgrading to React 18 yet.

2. Run the development server

$ pnpm dev

By default, your app will be available on http://localhost:5173

3. Build for production

$ pnpm build

This will output the build into dist. You may use this directory for static deployments. The build size will be quite large due to three.js. This can be visualized by opening the stats.html build artifact in your browser

Resources