three.js-es6-webpack-starter
Three.js ES6 starter project with a sane webpack configuration.
Features
- ES6 support with babel-loader
- JS linting + code formatting with eslint and prettier
- Offscreen canvas rendering in a web worker with OffscreenCanvas
- CSS support with style-loader and css-loader
- CSS linting with stylelint
- Controls with orbit-controls-es6
- GUI with dat.GUI
- Tests with jest
- Webpack configuration with:
- @packtracker/webpack-plugin (bundle sizes here)
- circular-dependency-plugin
- clean-webpack-plugin
- compression-webpack-plugin
- duplicate-package-checker-webpack-plugin
- favicons-webpack-plugin
- html-webpack-plugin
- mini-css-extract-plugin
- speed-measure-webpack-plugin
- terser-webpack-plugin
- webpack-bundle-analyzer
- webpack-glsl-loader
- worker-loader
Installation
git clone git@github.com:jackdbd/threejs-es6-webpack-starter.git
cd threejs-es6-webpack-starter
yarn
Usage (development)
Run webpack-dev-server
(js/css bundles will be served from memory)
yarn start
Go to localhost:8080
to see your project live!
Usage (production)
Generate all js/css bundles
yarn build
Other
Analyze webpack bundles offline:
yarn build # to generate build/stats.json
yarn stats # uses webpack-bundle-analyzer as CLI
or push to a CI (e.g. Travis CI), let it build your project and analyze your bundles online at packtracker.io.
Check outdated dependencies with npm-check-updates:
yarn ncu
Update all outdated dependencies at once:
yarn ncuu
Or let updtr update all your dependencies for you:
yarn updtr
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).