
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.