three.js-es6-webpack-starter
A minimal three.js ES6 starter project that uses webpack.
validateschema
error when running yarn dev
, try downgrading webpack-cli
to 2.0.0
. It seems a bug that affects only webpack-dev-server.
Features
- ES6 support with babel-loader
- CSS support with style-loader and css-loader
- SASS support with sass-loader
- Code formatting with prettier
- SASS linting with sass-lint
- Controls with orbit-controls-es6
- GUI with dat.GUI
- GLSL shaders support via webpack-glsl-loader
- Tests with jest, jest-dom
- Webpack configuration with:
Installation
git clone [email protected]:jackdbd/threejs-es6-webpack-starter.git
cd threejs-es6-webpack-starter
yarn
Usage (development)
Run webpack-dev-server
(all bundles will be served from memory)
yarn dev
Go to localhost:8080
to see your project live!
Go to localhost:8888
to analyze your webpack bundles with BundleAnalyzerPlugin
Usage (production)
Generate all js/css bundles
yarn build
Other
Check outdated dependencies
yarn ncu
Credits
The setup of this starter project was inspired by two snippets on Codepen: this one and this one.
I understood how to work with lights and camera helpers thanks to this snippet on JSFiddle.
The code for vertexShader.glsl
and fragmentShader.glsl
is taken from
this blog post.
The star used in the particle system is the PNG preview of this image by Offnfopt (Public domain or CC0, via Wikimedia Commons).