ThreeJS Intermediate Skill Tutorials
2 min readOct 24, 2018
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
- 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
- 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.