Modern Three

screenshot of Modern Three

Modern Three

Modern ThreeJS boilerplate powered by Vite & Typescript.


The Modern ThreeJS is a boilerplate to develop ThreeJS applications. It is powered by Vite and Typescript, providing a modern and efficient development environment. With features like GUI controls using Tweakpane, support for shaders (glsl), and the option to become a sponsor or make a one-time donation, this boilerplate aims to streamline the process of building ThreeJS projects.


  • Powered with Vite: The boilerplate is built using Vite, a fast and efficient build tool for web applications.
  • GUI controls using Tweakpane: It integrates Tweakpane, a lightweight JavaScript library for creating GUI interfaces, to easily manipulate parameters in real-time.
  • Typescript: The boilerplate is written in Typescript, a typed superset of JavaScript, enabling better code organization and error-checking.
  • No classes, just functions: The boilerplate follows a functional programming approach, avoiding the use of classes and maintaining a more modular structure.
  • Shader support (glsl) with vite-plugin-glsl: The boilerplate supports shaders written in glsl, a shading language used in WebGL, and integrates the vite-plugin-glsl for seamless use.
  • Sponsor on GitHub: You can contribute to the project by becoming a sponsor on GitHub and supporting its continuous development.
  • One-time donation via PayPal: An alternative way to support the project is by making a one-time donation through PayPal.


To use the Modern ThreeJS boilerplate, follow the steps below:

  1. Clone the repository with the following command:
git clone <repository-url>
  • Replace <repository-url> with the URL of the repository you want to clone.
  1. Change into the project directory:
cd <project-directory>
  • Replace <project-directory> with the name of the directory created after cloning the repository.
  1. Install the dependencies:
npm install


The Modern ThreeJS boilerplate is a powerful tool for developing ThreeJS applications. It provides a modern development environment, including features like GUI controls, Typescript support, and shader integration. By offering sponsorship options and one-time donations, the project encourages community support, ensuring its continuous development and improvement.


Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects


TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.