Three.js Creation Diary on Feynman's Blog

10 | GLSL Basics

Sat, 15 Aug 2026 12:00:00 +0800

The first 9 lessons all used Three.js built-in materials (MeshStandardMaterial, MeshBasicMaterial…). This lesson starts writing custom shaders — talking to the GPU directly with GLSL, so gradients, waves, and Fresnel effects are generated entirely by code instead of built-in material presets.

01 Learning Objectives

This lesson focuses on GLSL shader programming fundamentals:

Understand the structure and execution flow of Vertex / Fragment Shaders
Master the roles of gl_Position / gl_FragColor
Distinguish the three variable types: attribute / uniform / varying
Understand ShaderMaterial vs RawShaderMaterial
Master coordinate transformations (model → world → view → clip)

02 GLSL Basic Syntax

GLSL is a C-style shading language, slightly different from JS/TS. First, the most common “parts”.

09 | Animation System

Thu, 30 Jul 2026 12:00:00 +0800

In the first 8 lessons, all animations were manually written in the requestAnimationFrame loop. This lesson introduces GSAP tweening and Three.js native keyframe system for more elegant and powerful animation control.

01 Learning Objectives

This lesson focuses on Three.js animation system:

Understand requestAnimationFrame loop vs GSAP animation differences
Master gsap.to() / gsap.from() / gsap.timeline()
Learn to use GSAP for smooth camera and object movement
Master AnimationMixer for model animation playback
Learn keyframe animation (KeyframeTrack / AnimationClip)
Understand AnimationObjectGroup for shared animation across multiple objects

02 requestAnimationFrame vs GSAP

Feature	requestAnimationFrame	GSAP
Purpose	Per-frame logic (physics, LOD, rendering)	Tweening (smooth transitions)
Control	Manual delta, progress management	Auto interpolation, easing curves
Easing	Must implement yourself	30+ built-in easing functions
Sequencing	Must orchestrate yourself	timeline in one line
Performance	Optimal	Excellent (auto-optimized)

Both can be used simultaneously: rAF for render loop, GSAP for animation control.

08 | Model Loading

Tue, 28 Jul 2026 12:00:00 +0800

In the first 7 lessons, we created geometry with code. In real projects, 3D models are usually made in Blender/Maya, exported as GLTF/GLB, and loaded into the scene. This lesson covers the complete model loading pipeline: load → compress → scale → animate.

01 Learning Objectives

This lesson focuses on Three.js model loading system:

Understand GLTF/GLB format differences and file structure
Learn to use GLTFLoader to load models
Understand Draco compression principles and configuration
Implement LoadingManager for unified progress management
Master model auto-scaling and centering algorithms
Understand LOD (Level of Detail) strategy
Learn AnimationMixer for animation playback

02 GLTF Format Details

GLTF vs GLB

Format	Description	Use Case
GLTF	JSON text, resources scattered (.gltf + .bin + textures)	Development/debugging
GLB	Binary, single file with all resources	Production

GLTF File Structure: