ThreeJS is probably the most used 3D JavaScript library on the web and it’s pretty easy to get started with. However, I found there is little beyond the introductory tutorials. You quickly get dropped off a skills cliff. We need something in between the intro “How to draw a cube” and “Let’s fill the screen with shader madness” levels. So here is my on going series of intermediate skill ThreeJS tutorials.

If there is a topic you would like me to cover, tell me. If you are building something for WebVR/WebXR, then let me know so I can help you get it featured in Firefox Reality.

General

Procedural Geometry

Customizing Vertex Shaders : modify geometry on the fly by customizing the default ThreeJS vertex shader.

: modify geometry on the fly by customizing the default ThreeJS vertex shader. Water Ripples with Vertex Shaders : generate water ripples in a plane by using a vertex shader and sine waves.

: generate water ripples in a plane by using a vertex shader and sine waves. Low Poly Trees : make cute low poly trees using merged geometry and vertex colors

: make cute low poly trees using merged geometry and vertex colors Low Poly Clouds : make cute low poly clouds by jittering and chopping spheres

: make cute low poly clouds by jittering and chopping spheres Low Poly Terrain Generation: make a full terrain from a height field, customized with simplex noise.

Particles Series