Skip to content

jackdbd/threejs-es6-webpack-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e4b00bb · Apr 19, 2022
Mar 3, 2019
Dec 23, 2018
Mar 8, 2020
Mar 8, 2020
Sep 14, 2019
Mar 8, 2020
Sep 14, 2019
Dec 23, 2018
Dec 23, 2018
Sep 14, 2019
Sep 14, 2019
Apr 19, 2022
Feb 29, 2020
Dec 23, 2018
Dec 23, 2018
Mar 3, 2019
Dec 23, 2018
Apr 30, 2017
Apr 19, 2022
Sep 14, 2019
Mar 5, 2019
Sep 14, 2019
Sep 14, 2019
Mar 7, 2020
Jan 5, 2019
Sep 14, 2019
Mar 8, 2020

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 [email protected]: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).