Three.js Boilerplate

🔥 Three.js + TypeScript + SolidJS + Vite + Vitest 🚀

Minimal, yet complete template for developing three.js projects.

📂 Structure

Three.js Boilerplate
├── __mocks__/
├── coverage/
├── dist/
├── node_modules/
├── public/
│   ├── assets/
│   ├── favicons/
│   ├── scripts/
│   ├── styles/
│   ├── browserconfig.xml
│   ├── manifest.json
│   ├── robots.txt
│   └── sitemap.xml
├── src/
│   ├── app/
│   ├── assets/
│   ├── components/
│   ├── sandbox/
│   ├── scss/
│   ├── shaders/
│   ├── utils/
│   ├── global.d.ts
│   └── main.tsx
├── tests/
│   ├── app/
│   ├── components/
│   ├── sandbox/
│   ├── shaders/
│   ├── utils/
│   ├── canvas.mock.d.ts
│   ├── canvas.mock.ts
│   └── global.spec.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts

       ◦ Linear Fog        ◦ Ground Plane        ◦ Orbit Controls        ◦ Stats Monitoring        ◦ Perspective Camera        ◦ Default WebGL2 Renderer        ◦ Ambient & Directional Lighting

      • Scene configuration file with initial parameter values.       • Custom checkerboard-like ground plane material.       • GUI controls built on top of lil-gui.       • Uncharted 2 tone mapping shader.

       ◦ Promise based APIs        ◦ Loading errors logging        ◦ Start, Progress & Complete loading events        ◦ usePublicFolder option for setting assets path        ◦ Audio, GLTF/GLB, CubeTexture & Texture loaders

      • Array, Color, Number, String & deepFreeze methods.       • Elastic Number, Vector3 and Vector3 classes.       • Custom Events and EventEmitter manager.       • Mouse Wheel normalization function.       • debounce and throttle functions.       • requestAnimationFrame manager.       • Custom Web Worker manager.       • Unity-like Vector3 directions.       • Spline interpolation manager.       • Screen Viewport manager.