rayelliott
/
ThreeJS-Webpack-ES6-Boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
83 Commits 1 Branch 2 Tags 6.6 MiB
JavaScript 99.9%
Go to file
Paul Graffam 80d504370c
Create nodejs.yml 		2020-03-09 20:39:15 -04:00
.github/workflows Create nodejs.yml 2020-03-09 20:39:15 -04:00
build Re-built 2019-01-29 16:54:53 -05:00
src Added template logic 2019-01-29 16:55:18 -05:00
.babelrc Set to correct new babel preset 2019-01-23 17:24:08 -05:00
.eslintrc Updated eslint rules, set to warning to continue npm execution 2016-10-06 23:17:10 -04:00
.gitignore Initial commit 2016-09-12 15:54:07 -04:00
LICENSE Adding license 2018-01-28 20:54:09 -05:00
README.md Update README.md 2019-02-05 16:47:12 -05:00
package-lock.json Added new packages, updated scripts 2019-01-29 16:52:45 -05:00
package.json Added new packages, updated scripts 2019-01-29 16:52:45 -05:00
postcss.config.js Added postcss autoprefixing 2019-01-29 16:55:27 -05:00
webpack.config.js Added minimization, set up css extract plugin, added style chunking, fixed paths 2019-01-29 16:56:13 -05:00

README.md

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 lints src/js
  • clean - Cleans build folder
  • lint - Runs lint on the src/js folder and uses the .eslintrc file 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 from src/public to build
  • 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