├── .browserslistrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .husky └── commit-msg ├── .prettierignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── _config.js ├── commitlint.config.cjs ├── index.html ├── package.json ├── playwright.config.js ├── pnpm-lock.yaml ├── postcss.config.cjs ├── public ├── app.webmanifest ├── favicon │ ├── favicon-192.webp │ └── favicon-512.webp ├── og.jpg └── sitemap.xml ├── src ├── assets │ └── fonts │ │ ├── Roboto-Bold.woff │ │ ├── Roboto-Bold.woff2 │ │ ├── Roboto-Medium.woff │ │ ├── Roboto-Medium.woff2 │ │ ├── Roboto-Regular.woff │ │ ├── Roboto-Regular.woff2 │ │ ├── Roboto-Thin.woff │ │ └── Roboto-Thin.woff2 ├── css │ └── global.css ├── js │ ├── index.js │ └── three.js ├── scss │ └── global.scss └── shaders │ ├── fragment.glsl │ └── vertex.glsl ├── tailwind.config.cjs ├── tests └── browsers.test.js └── vite.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 3 versions 2 | > 0.2% 3 | not dead 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | /test-results/ 9 | /playwright-report/ 10 | /playwright/.cache/ 11 | 12 | # production 13 | /dist 14 | 15 | # various 16 | high-level-dependencies.html 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "node": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:prettier/recommended", 10 | "plugin:import/recommended", 11 | "plugin:promise/recommended", 12 | "plugin:sonarjs/recommended", 13 | "plugin:unicorn/recommended" 14 | ], 15 | "overrides": [], 16 | "parserOptions": { 17 | "ecmaVersion": "latest", 18 | "sourceType": "module" 19 | }, 20 | "plugins": [ 21 | "prettier", 22 | "import", 23 | "simple-import-sort", 24 | "promise", 25 | "sonarjs", 26 | "unicorn" 27 | ], 28 | "settings": { 29 | "import/resolver": { 30 | "node": { 31 | "extensions": [".js"], 32 | "moduleDirectory": ["node_modules", "src/"] 33 | } 34 | } 35 | }, 36 | "ignorePatterns": ["**/*.html"], 37 | "rules": { 38 | // base 39 | "indent": ["error", 2, { "SwitchCase": 1 }], 40 | "linebreak-style": ["error", "windows"], 41 | "quotes": ["error", "single"], 42 | "semi": ["error", "always"], 43 | // end 44 | 45 | // prettier 46 | "arrow-body-style": "off", 47 | "prefer-arrow-callback": "off", 48 | "prettier/prettier": [ 49 | "error", 50 | { 51 | "printWidth": 80, 52 | "tabWidth": 2, 53 | "useTabs": false, 54 | "semi": true, 55 | "singleQuote": true, 56 | "jsxSingleQuote": true, 57 | "trailingComma": "none", 58 | "bracketSpacing": true, 59 | "bracketSameLine": false, 60 | "arrowParens": "always", 61 | "endOfLine": "crlf" 62 | } 63 | ], 64 | // end prettier 65 | 66 | // simple-import-sort 67 | "simple-import-sort/imports": "error", 68 | "simple-import-sort/exports": "error", 69 | "import/first": "error", 70 | "import/newline-after-import": "error", 71 | "import/no-duplicates": "error" 72 | // end simple-import-sort 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | /test-results/ 9 | /playwright-report/ 10 | /playwright/.cache/ 11 | 12 | # production 13 | /dist 14 | /dist-ssr 15 | 16 | # various 17 | /playwright-report 18 | TODO.md 19 | OLD_README.md 20 | 21 | # misc 22 | .DS_Store 23 | *.pem 24 | 25 | # debug 26 | npm-debug.log* 27 | yarn-debug.log* 28 | yarn-error.log* 29 | .pnpm-debug.log* 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # editor directories and files 35 | .vscode/* 36 | !.vscode/extensions.json 37 | .idea 38 | *.suo 39 | *.ntvs* 40 | *.njsproj 41 | *.sln 42 | *.sw? 43 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npx --no -- commitlint --edit ${1} -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | 6 | # testing 7 | /coverage 8 | /test-results/ 9 | /playwright-report/ 10 | /playwright/.cache/ 11 | 12 | # production 13 | /dist 14 | 15 | # various 16 | high-level-dependencies.html 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "jsxSingleQuote": true, 8 | "trailingComma": "none", 9 | "bracketSpacing": true, 10 | "bracketSameLine": false, 11 | "arrowParens": "always", 12 | "endOfLine": "crlf", 13 | "plugins": ["prettier-plugin-tailwindcss"] 14 | } 15 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | doinel1atanasiu@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Doinel Atanasiu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [node]: https://nodejs.org/en 2 | [yarn]: https://yarnpkg.com 3 | [pnpm]: https://pnpm.io 4 | [demo]: https://vite-three-js.d1a.app 5 | [license]: https://github.com/doinel1a/vite-three-js/blob/main/LICENSE 6 | [code-of-conduct]: https://github.com/doinel1a/vite-three-js/blob/main/CODE_OF_CONDUCT.md 7 | [issues]: https://github.com/doinel1a/vite-three-js/issues 8 | [pulls]: https://github.com/doinel1a/vite-three-js/pulls 9 | [browserslist]: https://browsersl.ist/#q=last+3+versions%2C%3E+0.2%25%2C+not+dead 10 | [graphviz]: https://www.graphviz.org/download 11 | [commitlint]: https://github.com/conventional-changelog/commitlint/#what-is-commitlint 12 | [webpack-three-js]: https://github.com/doinel1a/webpack-three-js 13 | [react-icon]: https://skillicons.dev/icons?i=react 14 | [ts-icon]: https://skillicons.dev/icons?i=ts 15 | [js-icon]: https://skillicons.dev/icons?i=js 16 | [tailwind-icon]: https://skillicons.dev/icons?i=tailwind 17 | [chrome-icon]: https://github.com/alrra/browser-logos/blob/main/src/chrome/chrome_64x64.png 18 | [firefox-icon]: https://github.com/alrra/browser-logos/blob/main/src/firefox/firefox_64x64.png 19 | [edge-icon]: https://github.com/alrra/browser-logos/blob/main/src/edge/edge_64x64.png 20 | [opera-icon]: https://github.com/alrra/browser-logos/blob/main/src/opera/opera_64x64.png 21 | [safari-icon]: https://github.com/alrra/browser-logos/blob/main/src/safari/safari_64x64.png 22 | 23 | # Vite Three JS — Template 24 | 25 | 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.
26 | 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! 27 | 28 | **[Demo][demo]** | **[Bug(label: bug)][issues]** | **[Feature(label: enhancement)][issues]** 29 | 30 | ## :bookmark: Table of contents 31 | 32 | - :computer: [Getting started](#computer-getting-started "Go to 'Getting started' section") 33 | - :battery: [Features](#battery-features "Go to 'Features' section") 34 | - :arrows_clockwise: [Versions](#arrows_clockwise-versions "Go to 'Versions' section") 35 | - :globe_with_meridians: [Browsers support](#globe_with_meridians-browsers-support "Go to 'Browsers support' section") 36 | - :busts_in_silhouette: [Contribute](#busts_in_silhouette-contribute "Go to 'Contribute' section") 37 | - :bookmark_tabs: [License](#bookmark_tabs-license "Go to 'License' section") 38 | - :gem: [Acknowledgements](#gem-acknowledgements "Go to 'Acknowledgements' section") 39 | 40 | --- 41 | 42 | ## :computer: Getting started 43 | 44 | ### Prerequisites: 45 | 46 | - JavaScript runtime **[node.js][node]**; 47 | - **(OPTIONAL)** Alternative package manager: 48 | - **[PNPM][pnpm]** `npm install --global pnpm`
or 49 | - **[Yarn][yarn]** `npm install --global yarn` 50 | 51 | ### Start developing: 52 | 53 | - Get the repository: 54 | - click **"Use this template"**   or   **"Fork"** button
alternately 55 | - **clone** the repository through your terminal:
56 | `git clone https://github.com/doinel1a/vite-three-js YOUR-PROJECT-NAME`; 57 | - Open your terminal or code editor to the path your project is located, and run: 58 | | | **NPM** | **PNPM** | **Yarn** | 59 | | ------------------------------------------------ | ----------------- | -------------- | -------------- | 60 | | To **install** the dependencies | `npm install` | `pnpm install` | `yarn install` | 61 | | To **run** the **development server** | `npm run dev` | `pnpm dev` | `yarn dev` | 62 | | To **build** your app **for production** | `npm run build` | `pnpm build` | `yarn build` | 63 | | To **preview** your **production optimized app** | `npm run preview` | `pnpm preview` | `yarn preview` | 64 | 65 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 66 | 67 | --- 68 | 69 | ## :battery: Features 70 | 71 | This repository comes 🔋 packed with: 72 | 73 | - **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; 74 | - **TailwindCSS**: A utility-first CSS framework that provides predefined classes for common styles and layout patterns, allowing quick styling without writing custom CSS; 75 | - **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; 76 | - **PostCSS**: A tool for transforming CSS with JavaScript plugins, allowing to add new features to CSS and improve the development process; 77 | - **Playwright**: A library for automating web browser interactions, allowing the writing of end-to-end tests and perform browser automation tasks; 78 | - **Vite**: A build tool and development server that provides fast and efficient development and production builds for modern web applications; 79 | 80 | And with tools that enhance the development experience: 81 | 82 | - **ESLint**: A tool for enforcing coding standards and identifying potential errors in the code; 83 | - **Prettier**: A code formatter that automatically formats code to conform to a consistent style, making it easier to read and maintain; 84 | - **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; 85 | - **Commitlint**: A tool for enforcing commit message conventions in Git repositories, helping to ensure consistent and informative commit messages; 86 | 87 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 88 | 89 | --- 90 | 91 | ## :arrows_clockwise: Versions 92 | 93 | This repository comes configured with 2 of the industry standards for development tools: **Webpack** and **Vite**.
94 | Both tools support **SWC (Speedy Web Compiler)**, a **Rust-based compiler**; Vite is optimized for it out of the box. 95 | 96 | ### Vite (SWC compiler) 97 | 98 | Is a simple and fast solution thanks to it's "zero-config" approach which offers a smoother development experience. 99 | 100 | | React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript | 101 | | :----------------------------------------------------: | :----------------------------------------------------: | :-: | :-----------------------------: | :-------------------------: | 102 | | ![React][react-icon] & ![TS][ts-icon]
**Soon!** | ![React][react-icon] & ![JS][js-icon]
**Soon!** | | ![TS][ts-icon]
**Soon!** | ![JS][js-icon]
**/** | 103 | 104 | ### Webpack (Babel compiler) 105 | 106 | Is more a flexible solution, capable of handling complex configurations. 107 | 108 | | React - TypeScript | React - JavaScript | | Vanilla TypeScript | Vanilla JavaScript | 109 | | :----------------------------------------------------: | :----------------------------------------------------: | :-: | :-----------------------------: | :------------------------------------------------: | 110 | | ![React][react-icon] & ![TS][ts-icon]
**Soon!** | ![React][react-icon] & ![JS][js-icon]
**Soon!** | | ![TS][ts-icon]
**Soon!** | ![JS][js-icon]
**[Repo][webpack-three-js]** | 111 | 112 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 113 | 114 | --- 115 | 116 | ## :globe_with_meridians: Browsers support 117 | 118 | The provided configuration ensures **92.3%** coverage for all browsers, in particular of the following: 119 | 120 | | Chrome | Firefox | Edge | Opera | Safari | 121 | | :---------------------------: | :------------------------------: | :--------------------------: | :------------------: | ---------------------------- | 122 | | ![Google Chrome][chrome-icon] | ![Mozilla Firefox][firefox-icon] | ![Microsoft Edge][edge-icon] | ![Opera][opera-icon] | ![Apple Safari][safari-icon] | 123 | 124 | **\*** In order to support a wider percentage of browsers, update the `./.browserslistrc` configuration file: 125 | 126 | 1. `last 3 versions`: browser version; 127 | 2. `> 0.2%`: browser usage statistics; 128 | 3. `not dead`: whether the browser is officially supported; 129 | 130 | Update the configuration [here][browserslist] and check in real-time the **global browsers support**. 131 | 132 | **\* The more versions to support, larger JS and CSS bundles size will be.** 133 | 134 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 135 | 136 | --- 137 | 138 | ## :busts_in_silhouette: Contribute 139 | 140 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. 141 | Any contribution is greatly appreciated: big or small, it can be documentation updates, adding new features or something bigger. 142 | Please check the [**contributing guide**][code-of-conduct] for details on how to help out and keep in mind that all commits must follow the **[conventional commit format][commitlint]**. 143 | 144 | ### How to contribute: 145 | 146 | 1. **[Get started](#computer-getting-started "Go to 'Getting started' section");** 147 | 2. **For a new feature:** 148 | 1. Create a new branch: `git checkout -b feat/NEW-FEATURE`; 149 | 2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`; 150 | 3. Commit your changes: `git commit -m "feat: NEW FEATURE"`; 151 | 4. Push your new branch: `git push origin feat/NEW-FEATURE`; 152 | 3. **For a bug fix:** 153 | 1. Create a new branch: `git checkout -b fix/BUG-FIX`; 154 | 2. Add your changes to the staging area: `git add PATH/TO/FILENAME.EXTENSION`; 155 | 3. Commit your changes: `git commit -m "fix: BUG FIX"`; 156 | 4. Push your new branch: `git push origin fix/BUG-FIX`; 157 | 4. **Open a new [pull request][pulls];** 158 | 159 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 160 | 161 | --- 162 | 163 | ## :bookmark_tabs: License 164 | 165 | All logos and trademarks are the property of their respective owners. 166 | Everything else is distributed under the **MIT License**. 167 | See the [LICENSE][license] file for more informations. 168 | 169 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 170 | 171 | --- 172 | 173 | ## :gem: Acknowledgements 174 | 175 | Special thanks to: 176 | 177 | - [alrra](https://github.com/alrra) for [browser-logos](https://github.com/alrra/browser-logos); 178 | - [tandpfun](https://github.com/tandpfun) for [skill-icons](https://github.com/tandpfun/skill-icons); 179 | 180 | [Back to :arrow_up:](#vite-three-js--template "Back to 'Table of contents' section") 181 | -------------------------------------------------------------------------------- /_config.js: -------------------------------------------------------------------------------- 1 | const _config = { 2 | server: { 3 | host: 'localhost', 4 | port: 3000 5 | } 6 | }; 7 | 8 | export default _config; 9 | -------------------------------------------------------------------------------- /commitlint.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Vite ThreeJS — Template 11 | 12 | 13 | 17 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 45 | 49 | 50 | 51 | 52 | 53 | 54 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 88 |
89 |
92 |
93 |

96 | Vite ThreeJS — Template 97 |

98 | 101 |
102 |
103 | 104 | 111 | 138 | 139 |
140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "author": { 4 | "name": "Doinel Atanasiu", 5 | "email": "doinel1atanasiu@gmail.com", 6 | "url": "https://business-link.d1a.app" 7 | }, 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/doinel1a/vite-three-js" 11 | }, 12 | "type": "module", 13 | "license": "MIT", 14 | "scripts": { 15 | "postinstall": "husky & playwright install", 16 | "clean:dist": "npx rimraf dist", 17 | "clean:report": "npx rimraf playwright-report", 18 | "test:chrome": "npx playwright test --headed --project=chromium", 19 | "test:firefox": "npx playwright test --headed --project=firefox", 20 | "test:safari": "npx playwright test --headed --project=webkit", 21 | "lint": "npx eslint --ext js ./src", 22 | "lint:fix": "npx eslint --ext js ./src --fix", 23 | "dev": "vite --host", 24 | "build": "vite build", 25 | "preview": "vite preview" 26 | }, 27 | "dependencies": { 28 | "@vitejs/plugin-legacy": "^6.0.2", 29 | "three": "^0.174.0" 30 | }, 31 | "devDependencies": { 32 | "@builder.io/partytown": "^0.10.3", 33 | "@commitlint/cli": "^19.8.0", 34 | "@commitlint/config-conventional": "^19.8.0", 35 | "@playwright/test": "^1.51.0", 36 | "autoprefixer": "^10.4.21", 37 | "cssnano": "^7.0.6", 38 | "eslint": "^8.57.0", 39 | "eslint-config-prettier": "^10.1.1", 40 | "eslint-plugin-import": "^2.31.0", 41 | "eslint-plugin-prettier": "^5.2.3", 42 | "eslint-plugin-promise": "^7.2.1", 43 | "eslint-plugin-simple-import-sort": "^12.1.1", 44 | "eslint-plugin-sonarjs": "^0.25.1", 45 | "eslint-plugin-unicorn": "^56.0.1", 46 | "husky": "^9.1.7", 47 | "postcss": "^8.5.3", 48 | "prettier": "^3.5.3", 49 | "prettier-plugin-tailwindcss": "^0.6.11", 50 | "sass": "^1.85.1", 51 | "tailwindcss": "^3.4.17", 52 | "terser": "^5.39.0", 53 | "vite": "^6.2.2", 54 | "vite-plugin-glsl": "^1.3.3" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /playwright.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test'; 2 | 3 | /** 4 | * Read environment variables from file. 5 | * https://github.com/motdotla/dotenv 6 | */ 7 | // require('dotenv').config(); 8 | 9 | /** 10 | * See https://playwright.dev/docs/test-configuration. 11 | */ 12 | export default defineConfig({ 13 | testDir: './tests', 14 | /* Maximum time one test can run for. */ 15 | timeout: 30 * 1000, 16 | expect: { 17 | /** 18 | * Maximum time expect() should wait for the condition to be met. 19 | * For example in `await expect(locator).toHaveText();` 20 | */ 21 | timeout: 5000 22 | }, 23 | /* Run tests in files in parallel */ 24 | fullyParallel: true, 25 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 26 | forbidOnly: !!process.env.CI, 27 | /* Retry on CI only */ 28 | retries: process.env.CI ? 2 : 0, 29 | /* Opt out of parallel tests on CI. */ 30 | workers: process.env.CI ? 1 : undefined, 31 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */ 32 | reporter: 'html', 33 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ 34 | use: { 35 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ 36 | actionTimeout: 0, 37 | /* Base URL to use in actions like `await page.goto('/')`. */ 38 | // baseURL: 'http://localhost:3000', 39 | 40 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 41 | trace: 'on-first-retry' 42 | }, 43 | 44 | /* Configure projects for major browsers */ 45 | projects: [ 46 | { 47 | name: 'chromium', 48 | use: { ...devices['Desktop Chrome'] } 49 | }, 50 | 51 | { 52 | name: 'firefox', 53 | use: { ...devices['Desktop Firefox'] } 54 | }, 55 | 56 | { 57 | name: 'webkit', 58 | use: { ...devices['Desktop Safari'] } 59 | } 60 | 61 | /* Test against mobile viewports. */ 62 | // { 63 | // name: 'Mobile Chrome', 64 | // use: { ...devices['Pixel 5'] }, 65 | // }, 66 | // { 67 | // name: 'Mobile Safari', 68 | // use: { ...devices['iPhone 12'] }, 69 | // }, 70 | 71 | /* Test against branded browsers. */ 72 | // { 73 | // name: 'Microsoft Edge', 74 | // use: { channel: 'msedge' }, 75 | // }, 76 | // { 77 | // name: 'Google Chrome', 78 | // use: { channel: 'chrome' }, 79 | // }, 80 | ] 81 | 82 | /* Folder for test artifacts such as screenshots, videos, traces, etc. */ 83 | // outputDir: 'test-results/', 84 | 85 | /* Run your local dev server before starting the tests */ 86 | // webServer: { 87 | // command: 'npm run start', 88 | // port: 3000, 89 | // }, 90 | }); 91 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('postcss-import'), 4 | require('tailwindcss/nesting'), 5 | require('tailwindcss'), 6 | require('autoprefixer'), 7 | require('cssnano') 8 | ] 9 | }; 10 | -------------------------------------------------------------------------------- /public/app.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "lang": "en-EN", 3 | "name": "Vite ThreeJS — Template", 4 | "short_name": "Vite Vanilla ThreeJS — Template", 5 | "description": "Boilerplate template designed to quickly bootstrapping a 3D Web App, SPA, website or landing page with Three.JS, GLSL, Vite, TailwindCSS, ESLint, Husky and much more in just 30 seconds.", 6 | "start_url": "/", 7 | "display": "standalone", 8 | "orientation": "portrait", 9 | "theme_color": "#000", 10 | "background_color": "#000", 11 | "icons": [ 12 | { 13 | "src": "/favicon/favicon-192.png", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | { 18 | "src": "/favicon/favicon-512.png", 19 | "sizes": "512x512", 20 | "type": "image/png", 21 | "purpose": "maskable" 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /public/favicon/favicon-192.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/public/favicon/favicon-192.webp -------------------------------------------------------------------------------- /public/favicon/favicon-512.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/public/favicon/favicon-512.webp -------------------------------------------------------------------------------- /public/og.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/public/og.jpg -------------------------------------------------------------------------------- /public/sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | https://vite-three-js.d1a.app/ 7 | 2023-04-15T19:40:55+00:00 8 | 9 | -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Bold.woff -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Medium.woff -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Regular.woff -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Thin.woff -------------------------------------------------------------------------------- /src/assets/fonts/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doinel1a/vite-three-js/28775a08f41b00d328bba1701da882eb2a3ad037/src/assets/fonts/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /src/css/global.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | :root { 6 | /* 7 | https://tailwindcss.com/docs/customizing-colors 8 | */ 9 | --primary: #262626; /* neutral-800 */ 10 | --secondary: #171717; /* neutral-900 */ 11 | --tertiary: #404040; /* neutral-700 */ 12 | --color: #f3f3f3; 13 | --accent-primary: #2563eb; /* blue-600 */ 14 | --accent-primary-state: #1d4ed8; /* blue-700 */ 15 | } 16 | 17 | html, 18 | body { 19 | width: 100%; 20 | height: 100%; 21 | } 22 | 23 | .github-corner:hover .octo-arm { 24 | animation: octocat-wave 560ms ease-in-out; 25 | } 26 | 27 | @keyframes octocat-wave { 28 | 0%, 29 | 100% { 30 | transform: rotate(0); 31 | } 32 | 20%, 33 | 60% { 34 | transform: rotate(-25deg); 35 | } 36 | 40%, 37 | 80% { 38 | transform: rotate(10deg); 39 | } 40 | } 41 | 42 | @media (max-width: 500px) { 43 | .github-corner:hover .octo-arm { 44 | animation: none; 45 | } 46 | .github-corner .octo-arm { 47 | animation: octocat-wave 560ms ease-in-out; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import '../css/global.css'; 2 | import '../scss/global.scss'; 3 | 4 | import Three from './three'; 5 | 6 | document.addEventListener('DOMContentLoaded', () => {}); 7 | 8 | window.addEventListener('load', () => { 9 | const canvas = document.querySelector('#canvas'); 10 | 11 | if (canvas) { 12 | new Three(document.querySelector('#canvas')); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /src/js/three.js: -------------------------------------------------------------------------------- 1 | import * as T from 'three'; 2 | // eslint-disable-next-line import/no-unresolved 3 | import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; 4 | 5 | import fragment from '../shaders/fragment.glsl'; 6 | import vertex from '../shaders/vertex.glsl'; 7 | 8 | const device = { 9 | width: window.innerWidth, 10 | height: window.innerHeight, 11 | pixelRatio: window.devicePixelRatio 12 | }; 13 | 14 | export default class Three { 15 | constructor(canvas) { 16 | this.canvas = canvas; 17 | 18 | this.scene = new T.Scene(); 19 | 20 | this.camera = new T.PerspectiveCamera( 21 | 75, 22 | device.width / device.height, 23 | 0.1, 24 | 100 25 | ); 26 | this.camera.position.set(0, 0, 2); 27 | this.scene.add(this.camera); 28 | 29 | this.renderer = new T.WebGLRenderer({ 30 | canvas: this.canvas, 31 | alpha: true, 32 | antialias: true, 33 | preserveDrawingBuffer: true 34 | }); 35 | this.renderer.setSize(device.width, device.height); 36 | this.renderer.setPixelRatio(Math.min(device.pixelRatio, 2)); 37 | 38 | this.controls = new OrbitControls(this.camera, this.canvas); 39 | 40 | this.clock = new T.Clock(); 41 | 42 | this.setLights(); 43 | this.setGeometry(); 44 | this.render(); 45 | this.setResize(); 46 | } 47 | 48 | setLights() { 49 | this.ambientLight = new T.AmbientLight(new T.Color(1, 1, 1, 1)); 50 | this.scene.add(this.ambientLight); 51 | } 52 | 53 | setGeometry() { 54 | this.planeGeometry = new T.PlaneGeometry(1, 1, 128, 128); 55 | this.planeMaterial = new T.ShaderMaterial({ 56 | side: T.DoubleSide, 57 | wireframe: true, 58 | fragmentShader: fragment, 59 | vertexShader: vertex, 60 | uniforms: { 61 | progress: { type: 'f', value: 0 } 62 | } 63 | }); 64 | 65 | this.planeMesh = new T.Mesh(this.planeGeometry, this.planeMaterial); 66 | this.scene.add(this.planeMesh); 67 | } 68 | 69 | render() { 70 | const elapsedTime = this.clock.getElapsedTime(); 71 | 72 | this.planeMesh.rotation.x = 0.2 * elapsedTime; 73 | this.planeMesh.rotation.y = 0.1 * elapsedTime; 74 | 75 | this.renderer.render(this.scene, this.camera); 76 | requestAnimationFrame(this.render.bind(this)); 77 | } 78 | 79 | setResize() { 80 | window.addEventListener('resize', this.onResize.bind(this)); 81 | } 82 | 83 | onResize() { 84 | device.width = window.innerWidth; 85 | device.height = window.innerHeight; 86 | 87 | this.camera.aspect = device.width / device.height; 88 | this.camera.updateProjectionMatrix(); 89 | 90 | this.renderer.setSize(device.width, device.height); 91 | this.renderer.setPixelRatio(Math.min(device.pixelRatio, 2)); 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /src/scss/global.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Roboto'; 3 | src: local('Roboto-Thin'), 4 | url('../assets/fonts/Roboto-Thin.woff2') format('woff2'), 5 | url('../assets/fonts/Roboto-Thin.woff') format('woff'); 6 | font-weight: 300; 7 | font-display: swap; 8 | } 9 | 10 | @font-face { 11 | font-family: 'Roboto'; 12 | src: local('Roboto-Regular'), 13 | url('../assets/fonts/Roboto-Regular.woff2') format('woff2'), 14 | url('../assets/fonts/Roboto-Regular.woff') format('woff'); 15 | font-weight: 400; 16 | font-display: swap; 17 | } 18 | 19 | @font-face { 20 | font-family: 'Roboto'; 21 | src: local('Roboto-Medium'), 22 | url('../assets/fonts/Roboto-Medium.woff2') format('woff2'), 23 | url('../assets/fonts/Roboto-Medium.woff') format('woff'); 24 | font-weight: 600; 25 | font-display: swap; 26 | } 27 | 28 | @font-face { 29 | font-family: 'Roboto'; 30 | src: local('Roboto-Bold'), 31 | url('../assets/fonts/Roboto-Bold.woff2') format('woff2'), 32 | url('../assets/fonts/Roboto-Bold.woff') format('woff'); 33 | font-weight: 900; 34 | font-display: swap; 35 | } 36 | 37 | * { 38 | font-family: 'Roboto', sans-serif; 39 | font-weight: 400; 40 | } 41 | -------------------------------------------------------------------------------- /src/shaders/fragment.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | gl_FragColor = vec4(vUv, 0.0, 1.0); 5 | } -------------------------------------------------------------------------------- /src/shaders/vertex.glsl: -------------------------------------------------------------------------------- 1 | varying vec2 vUv; 2 | 3 | void main() { 4 | vUv = uv; 5 | 6 | gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 7 | } -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./index.html', './src/**/**/*.{html,css,js}'], 4 | darkMode: 'class', 5 | theme: { 6 | extend: { 7 | colors: { 8 | primary: 'var(--primary)', 9 | secondary: 'var(--secondary)', 10 | tertiary: 'var(--tertiary)', 11 | color: 'var(--color)', 12 | 'accent-primary': 'var(--accent-primary)', 13 | 'accent-primary-state': 'var(--accent-primary-state)' 14 | } 15 | } 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /tests/browsers.test.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { test } from '@playwright/test'; 3 | 4 | import _config from '../_config'; 5 | 6 | const HOST = _config.server.host; 7 | const PORT = _config.server.port; 8 | 9 | test('Test browsers', async ({ page }) => { 10 | await page.goto(`http://${HOST}:${PORT}`); 11 | await page.pause(); 12 | }); 13 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | 3 | import { partytownVite } from '@builder.io/partytown/utils'; 4 | import legacy from '@vitejs/plugin-legacy'; 5 | import glsl from 'vite-plugin-glsl'; 6 | 7 | import _config from './_config'; 8 | 9 | const HOST = _config.server.host; 10 | const PORT = _config.server.port; 11 | 12 | export default { 13 | server: { 14 | host: HOST, 15 | port: PORT 16 | }, 17 | plugins: [ 18 | legacy(), 19 | glsl(), 20 | partytownVite({ 21 | dest: path.join(__dirname, 'dist', '~partytown') 22 | }) 23 | ] 24 | }; 25 | --------------------------------------------------------------------------------