Skip to content

jackdbd/threejs-es6-webpack-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

three.js-es6-webpack-starter

Build Status Renovate enabled Code style prettier

Three.js ES6 starter project with a sane webpack configuration.

A GIF file showing a demo of the starter project

Features

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