Skip to content
/ vite-three-js Public template

Boilerplate template designed to quickly bootstrap a 3D Web App, SPA, website or landing page with Three.JS, GLSL, Vite, TailwindCSS, ESLint, Husky and much more in just 30 seconds.

License

Notifications You must be signed in to change notification settings

doinel1a/vite-three-js

Repository files navigation

Vite Three JS โ€” Template

This boilerplate starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your environment from scratch each time you start developing.
It's ideal for front-end engineers who want to build modern, fast and reliable webgl web applications with the latest cutting edge technologies such as Three.JS, GLSL, JavaScript, TailwindCSS, Vite, ESLint, Prettier, Husky and much more!

Demo | Bug(label: bug) | Feature(label: enhancement)

๐Ÿ”– Table of contents


๐Ÿ’ป Getting started

Prerequisites:

  • JavaScript runtime node.js;
  • (OPTIONAL) Alternative package manager:
    • PNPM npm install --global pnpm
      or
    • Yarn npm install --global yarn

Start developing:

  • Get the repository:
    • click "Use this template" ย  or ย  "Fork" button
      alternately
    • clone the repository through your terminal:
      git clone https://github.com/doinel1a/vite-three-js YOUR-PROJECT-NAME;
  • Open your terminal or code editor to the path your project is located, and run:
    NPM PNPM Yarn
    To install the dependencies npm install pnpm install yarn install
    To run the development server npm run dev pnpm dev yarn dev
    To build your app for production npm run build pnpm build yarn build
    To preview your production optimized app npm run preview pnpm preview yarn preview

Back to โฌ†๏ธ


๐Ÿ”‹ Features

This repository comes ๐Ÿ”‹ packed with:

  • Three.JS: A JavaScript library built on top of WebGL that provides an abstraction layer for rendering interactive 3D and 2D scenes in the web browser;
  • TailwindCSS: A utility-first CSS framework that provides predefined classes for common styles and layout patterns, allowing quick styling without writing custom CSS;
  • SASS: A CSS preprocessor that adds features such as variables, nesting, and mixins to CSS, making it easier to write and maintain large CSS codebases;
  • PostCSS: A tool for transforming CSS with JavaScript plugins, allowing to add new features to CSS and improve the development process;
  • Playwright: A library for automating web browser interactions, allowing the writing of end-to-end tests and perform browser automation tasks;
  • Vite: A build tool and development server that provides fast and efficient development and production builds for modern web applications;

And with tools that enhance the development experience:

  • ESLint: A tool for enforcing coding standards and identifying potential errors in the code;
  • Prettier: A code formatter that automatically formats code to conform to a consistent style, making it easier to read and maintain;
  • Husky: A Git hook manager that allows easy set up and configuration of Git hooks, which are scripts that run at certain points in the Git workflow;
  • Commitlint: A tool for enforcing commit message conventions in Git repositories, helping to ensure consistent and informative commit messages;

Back to โฌ†๏ธ


๐Ÿ”ƒ Versions

This repository comes configured with 2 of the industry standards for development tools: Webpack and Vite.
Both tools support SWC (Speedy Web Compiler), a Rust-based compiler; Vite is optimized for it out of the box.

Vite (SWC compiler)

Is a simple and fast solution thanks to it's "zero-config" approach which offers a smoother development experience.

React - TypeScript React - JavaScript Vanilla TypeScript Vanilla JavaScript
React & TS
Soon!
React & JS
Soon!
TS
Soon!
JS
/

Webpack (Babel compiler)

Is more a flexible solution, capable of handling complex configurations.

React - TypeScript React - JavaScript Vanilla TypeScript Vanilla JavaScript
React & TS
Soon!
React & JS
Soon!
TS
Soon!
JS
Repo

Back to โฌ†๏ธ


๐ŸŒ Browsers support

The provided configuration ensures 92.3% coverage for all browsers, in particular of the following:

Chrome Firefox Edge Opera Safari
Google Chrome Mozilla Firefox Microsoft Edge Opera Apple Safari

* In order to support a wider percentage of browsers, update the ./.browserslistrc configuration file:

  1. last 3 versions: browser version;
  2. > 0.2%: browser usage statistics;
  3. not dead: whether the browser is officially supported;

Update the configuration here and check in real-time the global browsers support.

* The more versions to support, larger JS and CSS bundles size will be.

Back to โฌ†๏ธ


๐Ÿ‘ฅ Contribute

Contributions are what make the open source community such an amazing place to learn, inspire, and create.
Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger.
Please check the contributing guide for details on how to help out and keep in mind that all commits must follow the conventional commit format.

How to contribute:

  1. Get started;
  2. For a new feature:
    1. Create a new branch: git checkout -b feat/NEW-FEATURE;
    2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
    3. Commit your changes: git commit -m "feat: NEW FEATURE";
    4. Push your new branch: git push origin feat/NEW-FEATURE;
  3. For a bug fix:
    1. Create a new branch: git checkout -b fix/BUG-FIX;
    2. Add your changes to the staging area: git add PATH/TO/FILENAME.EXTENSION;
    3. Commit your changes: git commit -m "fix: BUG FIX";
    4. Push your new branch: git push origin fix/BUG-FIX;
  4. Open a new pull request;

Back to โฌ†๏ธ


๐Ÿ“‘ License

All logos and trademarks are the property of their respective owners.
Everything else is distributed under the MIT License.
See the LICENSE file for more informations.

Back to โฌ†๏ธ


๐Ÿ’Ž Acknowledgements

Special thanks to:

Back to โฌ†๏ธ