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).