Three.js project starter for ES6 and Webpack 2
As most developers know, the best way to learn is to build some stuff, so I decided to focus on learning the basics of ES6 and write a small project with a library that I wanted to use: Three.js.
ES6, Babel and Webpack
You can use a tool like
It took me a while to write the configuration file for Webpack, but at least it’s a set-and-forget thing.
After you have done it, you can write ES6 code, and your Webpack toolchain will take care of transpiling it to ES5.1 and bundling it into a single file (usually called
ESLint and AirBnB style guide
Variables, nesting selectors, partials, mixins? Yes please! CSS preprocessors like Sass or Less offer you many features that really speed you up. Your browser still needs CSS files, but you can use a Webpack loader to preprocess files as you
I started using SASS with the
.scss syntax, but after watching a couple of videos of DevTips I switched to
.sass. It feels so much better to have clean, nice formatted code. I’m a Python developer after all. :-)
I like to use a linter when I write
GLSL stands for OpenGL shading language. It’s a strongly typed, C/C++ like language, and it’s used to write shaders.
A shader is a small program that run on th GPU of your computer, and every WebGL program needs two shaders: a vertex shader and a fragment shader.
If you write pure WebGL code, you need to write your own shaders every time. In Three.js you have to do it only if you want to define a custom material which is not available in the library. You can do it by defining your own ShaderMaterial.
But where do you write this GLSL code?
Usually the GLSL code is written directly in the
This might be a convenient way to access the shader code if your project is small, but as your project gets bigger this solution becomes unpractical and messy pretty fast
I found a Webpack loader for glsl files, so I decided to write both shaders in independent files that I called
fragmentShader.glsl. Then I used
So, here is a preview of this project starter. Here you can see a grid, the XYZ axes, a directional light, a spotlight, a particle system (the stars), a group of green cubes (it’s treated as a single object) and an object that uses a custom
If you want to give Three.js a try, clone the repo threejs-es6-webpack-starter and have some 3D fun!
You can find some really nice tutorials about shaders and Custom Materials in Three.js here, here and here.
For some more advanced stuff on shaders see these websites: