paulmg / Threejs Webpack Es6 Boilerplate
Licence: mit
A basic boilerplate for a Three.js project compiled with Webpack and transpiled via Babel to enable using ES6 syntax.
Stars: ✭ 267
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to Threejs Webpack Es6 Boilerplate
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+511.61%)
Mutual labels: webpack, eslint, babel, boilerplate, sass
React Redux Universal Boilerplate
An Universal ReactJS/Redux Boilerplate
Stars: ✭ 165 (-38.2%)
Mutual labels: webpack, eslint, babel, boilerplate, sass
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-46.07%)
Mutual labels: webpack, eslint, babel, boilerplate, sass
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-86.89%)
Mutual labels: webpack, eslint, boilerplate, sass
React Isomorphic Boilerplate
🌟 An universal React isomorphic boilerplate for building server-side render web app.
Stars: ✭ 653 (+144.57%)
Mutual labels: webpack, eslint, babel, boilerplate
Express React Boilerplate
🚀🚀🚀 This is a tool that helps programmers create Express & React projects easily base on react-cool-starter.
Stars: ✭ 32 (-88.01%)
Mutual labels: webpack, eslint, babel, boilerplate
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+280.52%)
Mutual labels: webpack, babel, boilerplate, sass
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (-61.8%)
Mutual labels: webpack, babel, boilerplate, sass
React Redux Auth0 Kit
Minimal starter boilerplate project with CRA, React, Redux, React Router and Auth0 authentication
Stars: ✭ 115 (-56.93%)
Mutual labels: webpack, eslint, babel, boilerplate
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-47.19%)
Mutual labels: webpack, eslint, babel, boilerplate
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-49.81%)
Mutual labels: webpack, eslint, babel, boilerplate
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (-14.23%)
Mutual labels: webpack, eslint, babel, boilerplate
React Webpack Typescript Starter
Minimal starter with hot module replacement (HMR) for rapid development.
Stars: ✭ 632 (+136.7%)
Mutual labels: webpack, babel, boilerplate, sass
Webpack Boilerplate
A minimal webpack 5 boilerplate with only Babel, SASS and lodash (optional) on board
Stars: ✭ 404 (+51.31%)
Mutual labels: webpack, babel, boilerplate, sass
Budgeting
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Stars: ✭ 971 (+263.67%)
Mutual labels: webpack, eslint, babel, sass
Pwa
An opinionated progressive web app boilerplate
Stars: ✭ 353 (+32.21%)
Mutual labels: webpack, eslint, babel, boilerplate
Electron React Boilerplate
A Foundation for Scalable Cross-Platform Apps
Stars: ✭ 18,727 (+6913.86%)
Mutual labels: webpack, eslint, babel, boilerplate
React Redux Sass Starter
Everything you need to get started with a basic React application
Stars: ✭ 293 (+9.74%)
Mutual labels: webpack, eslint, babel, sass
React Bolt
⚡ The most simple & robust boilerplate for your React projects.
Stars: ✭ 298 (+11.61%)
Mutual labels: webpack, eslint, babel, boilerplate
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+553.56%)
Mutual labels: webpack, babel, boilerplate, sass
Three.js Webpack ES6 Boilerplate
https://github.com/paulmg/ThreeJS-Webpack-ES6-Boilerplate/
A basic boilerplate for a Three.js project including the use of Webpack and ES6 syntax via Babel.
Project Structure
build - Directory for built and compressed files from the npm build script
src - Directory for all dev files
├── css - Contains all SCSS files, that are compiled to `src/public/css`
├── js - All the Three.js app files, with `app.js` as entry point. Compiled to `src/public/js` with webpack
│ ├── app
│ │ ├── components - Three.js components that get initialized in `main.js`
│ │ ├── helpers - Classes that provide ideas on how to set up and work with defaults
│ │ ├── managers - Manage complex tasks such as GUI or input
│ │ └── model - Classes that set up the model object
│ ├── data - Any data to be imported into app
│ └── utils - Various helpers and vendor classes
└── public - Used by webpack-dev-server to serve content. Webpack builds local dev files here.
└── assets - Is copied over to build folder with build command. Place external asset files here.
Getting started
Install dependencies:
npm install
Then run dev script:
npm run dev
Spins up a webpack dev server at localhost:8080 and keeps track of all js and sass changes to files.
Build
npm run build
Cleans existing build folder while linting js folder and copies over the public assets folder from src. Then sets environment to production and compiles js and css into build.
Other NPM Scripts
You can run any of these individually if you'd like with the npm run command:
-
prebuild- Cleans up build folder and lintssrc/js -
clean- Cleans build folder -
lint- Runs lint on thesrc/jsfolder and uses the.eslintrcfile in root for linting rules -
webpack-server- Start up a webpack-dev-server with hot-module-replacement -
webpack-watch- Run webpack in dev environment with watch -
dev:js- Run webpack in dev environment without watch -
build:dir- Copy files and folders fromsrc/publictobuild -
build:js- Run webpack in production environment
Input Controls
- Press H to hide dat.GUI
- Arrow controls will pan
- Mouse left click will rotate/right click will pan
- Scroll wheel zooms in and out
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].