threejs-nextjs-starter

Three.js + React Three Fiber + Next.js starter kit.
Tailwind CSS, shadcn/ui, and Zustand are preconfigured so you can start building interactive 3D web experiences quickly.

---

Tech stack

• Framework: Next.js (App Router)
• 3D / Rendering:
  • three.js
  • @react-three/fiber (React Three Fiber)
  • @react-three/drei
  • @react-three/rapier (physics)
• Styling / UI:
  • Tailwind CSS v4
  • shadcn/ui (for headless UI components)
  • tw-animate-css
• State management: Zustand
• Others:
  • TypeScript
  • ESLint + Prettier + import sorting

---

Core versions

• Next.js: v16
• React: v19
• three.js: v0.181
• @react-three/fiber: v9
• @react-three/drei: v10
• @react-three/rapier: v2
• Tailwind CSS: v4
• tw-animate-css: v1.4
• Zustand: v5
• TypeScript: v5
• ESLint: v9
• Prettier: v3

For the full list of dependencies and exact versions, see package.json.

---

Getting started

# Install dependencies
yarn

# Run dev server
yarn dev

Open http://localhost:3000 in your browser to see the default Three.js canvas scene.

---

Project structure (high level)

• src/app/page.tsx
  • Main page. Dynamically imports and renders CanvasViewer.
• src/components/Canvas/CanvasViewer
  • Main viewer component that renders the 3D scene using Three.js / React Three Fiber.
• src/components/Canvas/Plane
  • Plane component used as the ground in the physics simulation.
• src/components/Canvas/Loader
  • Loader shown while 3D assets are being loaded.

---

Scripts

yarn dev       # start dev server
yarn build     # build for production
yarn start     # start production server
yarn lint      # run ESLint
yarn prettier  # format the codebase with Prettier

---

License

MIT License
Author: fluzzy (nick02190219@gmail.com)