pampanelson/threejs-es6-webpack-starter

A minimal three.js ES6 starter project that uses webpack.

three.js-es6-webpack-starter

A minimal three.js ES6 starter project that uses webpack.

⚠️ If you encounter a 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 via babel-loader
• CSS support via style-loader and css-loader
• SASS support via sass-loader
• ES6 linting via eslint and eslint-config-airbnb or prettier
• SASS linting via sass-lint
• Controls via orbit-controls-es6
• GUI via dat.GUI
• GLSL shaders support via webpack-glsl-loader
• Webpack configuration with:
  • mini-css-extract-plugin
  • HtmlWebpackPlugin
  • BundleAnalyzerPlugin
  • CompressionPlugin
  • CleanWebpackPlugin

Installation

git clone [email protected]:jackdbd/threejs-es6-webpack-starter.git
cd threejs-es6-webpack-starter

yarn install

Usage

Generate all js/css bundles

yarn run build

Run webpack-dev-server (all bundles will be served from memory)

yarn run dev

If you have issues with old dependencies you can try to fix them by running:

yarn update:packages

Go to localhost:8080 to see your project live!

Go to localhost:8888 to analyze your webpack bundles with BundleAnalyzerPlugin

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 script which wipes all project's npm dependencies and reinstall them from scratch was found here.

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