Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jackdbd/threejs-es6-webpack-starter

Three.js ES6 starter project with a sane webpack configuration
https://github.com/jackdbd/threejs-es6-webpack-starter

babel es6 eslint glsl threejs webpack

Last synced: 5 days ago
JSON representation

Three.js ES6 starter project with a sane webpack configuration

Host: GitHub
URL: https://github.com/jackdbd/threejs-es6-webpack-starter
Owner: jackdbd
License: mit
Created: 2017-04-30T07:35:18.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2023-08-01T03:20:02.000Z (over 1 year ago)
Last Synced: 2024-04-14T21:50:04.829Z (7 months ago)
Topics: babel, es6, eslint, glsl, threejs, webpack
Language: JavaScript
Homepage: https://jackdbd.github.io/threejs-es6-webpack-starter
Size: 39.2 MB
Stars: 89
Watchers: 5
Forks: 21
Open Issues: 11
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # three.js-es6-webpack-starter

[![Build Status](https://travis-ci.org/jackdbd/threejs-es6-webpack-starter.svg?branch=master)](https://travis-ci.org/jackdbd/threejs-es6-webpack-starter) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovateapp.com/) [![Code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

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

![A GIF file showing a demo of the starter project](https://github.com/jackdbd/threejs-es6-webpack-starter/blob/main/demo.gif?raw=true "A scene with a spotlight, a directional light, an ambient light, a particle system, a custom material and several helpers.")

## Features

- ES6 support with [babel-loader](https://github.com/babel/babel-loader)

- JS linting + code formatting with [eslint](https://eslint.org/) and [prettier](https://github.com/prettier/prettier)

- Offscreen canvas rendering in a web worker with [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)

- CSS support with [style-loader](https://github.com/webpack-contrib/style-loader)

  and [css-loader](https://github.com/webpack-contrib/css-loader)

- CSS linting with [stylelint](https://stylelint.io/)

- Controls with [orbit-controls-es6](https://www.npmjs.com/package/orbit-controls-es6)

- GUI with [dat.GUI](https://github.com/dataarts/dat.gui)

- Tests with [jest](https://jestjs.io/en/)

- Webpack configuration with:

  - [@packtracker/webpack-plugin](https://github.com/packtracker/webpack-plugin) (bundle sizes [here](https://app.packtracker.io/organizations/129/projects/110))

  - [circular-dependency-plugin](https://github.com/aackerman/circular-dependency-plugin)

  - [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin)

  - [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin)

  - [duplicate-package-checker-webpack-plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin)

  - [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin)

  - [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)

  - [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)

  - [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)

  - [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin/)

  - [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer)

  - [webpack-glsl-loader](https://github.com/grieve/webpack-glsl-loader)

  - [worker-loader](https://github.com/webpack-contrib/worker-loader)

## Installation

```shell

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)

```shell

yarn start

```

Go to `localhost:8080` to see your project live!

## Usage (production)

Generate all js/css bundles

```shell

yarn build

```

## Other

Analyze webpack bundles offline:

```shell

yarn build  # to generate build/stats.json

yarn stats  # uses webpack-bundle-analyzer as CLI

```

or push to a CI (e.g. [Travis CI](https://travis-ci.com/)), let it build your project and analyze your bundles online at [packtracker.io](https://packtracker.io/).

Check outdated dependencies with [npm-check-updates](https://github.com/tjunnone/npm-check-updates):

```shell

yarn ncu

```

Update all outdated dependencies at once:

```shell

yarn ncuu

```

Or let [updtr](https://github.com/peerigon/updtr) update all your dependencies for you:

```shell

yarn updtr

```

## Credits

The setup of this starter project was inspired by two snippets on Codepen: [this one](http://codepen.io/mo4_9/pen/VjqRQX) and [this one](https://codepen.io/iamphill/pen/jPYorE).

I understood how to work with lights and camera helpers thanks to

[this snippet](http://jsfiddle.net/f17Lz5ux/5131/) on JSFiddle.

The code for `vertexShader.glsl` and `fragmentShader.glsl` is taken from

[this blog post](http://blog.cjgammon.com/threejs-custom-shader-material).

The star used in the particle system is the PNG preview of [this image](https://commons.wikimedia.org/wiki/File:Star_icon-72a7cf.svg) by Offnfopt

(Public domain or CC0, via Wikimedia Commons).