ThreeJS Intermediate Skill Tutorials

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, jmarinacci@mozilla.com. If you are building something for WebVR/WebXR, then let me know so I can help you get it featured in Firefox Reality.

General

• ThreeJS secretly supports True Type Fonts: how to load TrueType fonts directly in ThreeJS instead of using JSON files.
• How to Draw Lines and Edges
• ThreeJS Lines and Faces: how to draw thick lines, crazy custom line effects, colored (textureless) faces, and points.
• Cartoon Outline Effect: creating a consistent width outline around complex geometry with a custom shader material.
• Quaternions are Spooky: a clear explanation of how to use quaternions and spherical geometry.

Procedural Geometry

• Customizing Vertex Shaders: 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.
• Low Poly Trees: make cute low poly trees using merged geometry and vertex colors.
• Low Poly Clouds: 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

• ThreeJS Particles: simple particles using CPU calculations.
• ThreeJS Particles, faster particles with all calculations on the GPU
• ThreeJS Particles, Recycling continuous particles over time using attribute recycling.
• ThreeJS Particles, Color Interpolation: changing the color of particles over time on the GPU, and building cool flames.
• Reverse Particles and Fading Away: running the particle equation in reverse and adding fade controls.
• Snowflake Particles, When Points just aren’t Enough: creating particles from full quads for more complex animation.
• Particles Go Wild with Textures: using alternate point textures to create a wide variety of effects.

Jingle Smash

• Jingle Smash: a WebVR Puzzler announcing and explaining Jingle Smash.
• How I made Jingle Smash: An overview of the app architecture
• Choosing a Physics Engine, how to use the CannonJS physics engine for ThreeJS
• Geometry and Textures using code to make custom geometry and textures
• Building an In-Game Level Editor edit levels directly within VR.
• Performance Work coverse how I got about a 20fps improvement to the game.