React Three Fiber Boilerplate

This is a boilerplate for React Three Fiber projects.

Features

Feature/ Dependency	Version Installed	Description
three	0.168.0	JavaScript 3D library.
@react-three/fiber	8.17.7	React renderer for threejs.
@react-three/drei	9.113.0	A collection of useful helpers and ready-made abstractions for react-three-fiber.
@react-three/postprocessing	2.16.3	Postprocessing wrapper for @react-three/fiber.
postprocessing	6.36.3	Post processing libray for threejs.
leva	0.9.34	A GUI component for debugging react three fiber applications.
r3f-perf	7.2.1	Monitor the performances of your react-three-fiber application.
vite-plugin-restart	0.4.1	Custom files/globs to restart Vite server.

Folder Structure

.
└── src/
    ├── experience/
    │   ├── common/
    │   │   ├── index.jsx
    │   │   ├── LevaPane.jsx
    │   │   └── PerformanceMonitor.jsx
    │   ├── environment/
    │   │   ├── index.jsx
    │   │   ├── Lights.jsx
    │   │   └── EnvironmentMap.jsx
    │   ├── post-processing/
    │   │   ├── index.jsx
    │   │   └── Effects.jsx
    │   ├── world/
    │   │   ├── index.jsx
    │   │   └── Base.jsx
    │   └── Experience.jsx
    ├── style.css
    ├── index.html
    └── index.jsx

Quick Start

Clone the repository

npm install

npm run dev