https://github.com/ustymukhman/threejs-boilerplate

:fire: Three.js + TypeScript + SolidJS + Vite + Vitest :rocket:
https://github.com/ustymukhman/threejs-boilerplate

boilerplate pnpm solidjs template threejs typescript vite vitest webgl webgl2

Last synced: about 1 year ago
JSON representation

:fire: Three.js + TypeScript + SolidJS + Vite + Vitest :rocket:

• Host: GitHub
• URL: https://github.com/ustymukhman/threejs-boilerplate
• Owner: UstymUkhman
• License: mit
• Created: 2017-06-15T13:31:39.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2023-05-25T14:28:30.000Z (about 3 years ago)
• Last Synced: 2025-03-01T04:15:51.309Z (over 1 year ago)
• Topics: boilerplate, pnpm, solidjs, template, threejs, typescript, vite, vitest, webgl, webgl2
• Language: TypeScript
• Homepage: https://ustymukhman.github.io/threejs-boilerplate/dist/
• Size: 7.02 MB
• Stars: 55
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Three.js Boilerplate #

🔥 [Three.js](https://threejs.org/) + [TypeScript](https://www.typescriptlang.org/) + [SolidJS](https://www.solidjs.com/) + [Vite](https://vitejs.dev/) + [Vitest](https://vitest.dev/) 🚀

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

![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/three?style=flat-square)

![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/dev/typescript?style=flat-square)

![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/solid-js?style=flat-square)

![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/dev/vite?style=flat-square)

![](https://img.shields.io/github/package-json/dependency-version/UstymUkhman/threejs-boilerplate/dev/vitest?style=flat-square)

![](https://img.shields.io/github/deployments/UstymUkhman/threejs-boilerplate/github-pages?style=flat-square)

![](https://img.shields.io/badge/coverage-100%25-brightgreen?style=flat-square)

![](https://img.shields.io/github/repo-size/UstymUkhman/threejs-boilerplate?color=yellowgreen&style=flat-square)

![](https://img.shields.io/github/package-json/v/UstymUkhman/threejs-boilerplate?color=orange&style=flat-square)

![](https://img.shields.io/github/license/UstymUkhman/threejs-boilerplate?color=lightgrey&style=flat-square)

[![](./public/assets/images/preview.jpg)](https://ustymukhman.github.io/threejs-boilerplate/dist)

## 📂 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

```

  

    
🔌 Usage

  

    Simply click Use this template and Create a new repository.

  


    This will initialize your own repository from this boilerplate.


  

    
✨ Features

  

  
   ⚙️ Basic

        • Cross-platform Favicons


        • Meta tags for sharing on Facebook and Twitter


        • Unsupported browser and disabled JavaScript screens


  
   🧩 Components

        • Application entry point


        • Logo label component


        • Current version tag


  
   🏝️ Sandbox

        • Simple three.js scene with:


         ◦ 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.

  
   🎨 Shaders

        • Custom shader support through vite-plugin-glsl.


        • Three.js shaders for ground plane material.


        • Three.js shaders for custom tone mapping.


  
   🛠️ Utilities

        • Assets loading manager:


         ◦ 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.

  
   🧰 Miscellaneous

        • Scoped SCSS and common easing functions.


        • Support for common 3D formats.


        • Common assets folders.


        • PWA-ready manifest.


        • MIT license.


  
   📦 Package Manager

        This project was build with pnpm, but yarn and npm are also supported.


        Just replace pnpm in all commands below with yarn or npm run.


        For npm users, one exception is the installation, where it's npm i.


  
   📈 Tests Coverage

        All the code in the src/ directory has been fully tested and has a 100% code coverage.


  

    

           Show me some numbers!



    

          

  


  

    
💾 Download

  

    git clone https://github.com/UstymUkhman/threejs-boilerplate.git

  


    cd threejs-boilerplate


  

    
⌨️ Develop

  

    pnpm i

  


    pnpm start


  

    
✔️ Lint

  

    pnpm lint:js

  


    pnpm lint:css


  

    
🧪 Test

  

    pnpm test

    


    pnpm test:watch

    


    pnpm test:cover


  

    
🧱 Build

  

    pnpm build

  


    pnpm serve