01 | Building 3D Project Architecture from Scratch
Build a Vite + TypeScript + Three.js project from scratch, understand the Scene / Camera / Renderer trio, master requestAnimationFrame + delta time animation loop.
Three.js Creation Diary 9 posts
A frontend developer's Web 3D learning notes. Starting from zero, using 20 lessons over 5 weeks to systematically learn Three.js + GLSL + WebGPU, with the goal of independently creating 3D special effects websites. Each note records a 'creation' process — building architecture, writing code, adjusting parameters, troubleshooting, turning abstract 3D concepts into tangible works. GitHub repository: https://github.com/onlyLucky/CreationDiary
02 | Geometry and Primitives
Master 5 basic geometries (Box, Sphere, Cylinder, Torus, Plane), understand the relationship between segments and performance, learn procedural texture generation and Wireframe visualization.
03 | Material System
Master 6 material types (Basic / Lambert / Phong / Standard / Physical / Toon), understand PBR material roughness and metalness, learn environment mapping and normal mapping.
04 | Lights and Shadows
Master 5 light types (Ambient / Hemisphere / Directional / Point / Spot), understand the three elements of shadows, and learn to balance shadow quality with performance.
05 | Cameras and Controls
Distinguish perspective and orthographic cameras, master OrbitControls configuration, understand camera parameters (fov, aspect, near, far), and learn camera switching and parameter adjustment.
06 | Textures and Mapping
TextureLoader, UV coordinates and texture mapping, repeat/offset/wrap control, CubeTextureLoader skybox, environment map and reflection, RGBELoader HDRI
07 | Scene Graph and Transformations
Scene graph tree structure, parent-child relationships and transform inheritance, local vs world coordinate systems, Object3D grouping, scene.traverse() traversal, AxesHelper/GridHelper debugging
11 | GLSL Math Functions
Built-in GLSL math functions (mix/step/smoothstep/sin/cos/pow), vector operations (dot/cross/normalize), drawing basic shapes with math, fract/mod periodic functions, coordinate transforms and UV mapping
12 | Noise Functions
Noise function principles (Perlin gradient noise, Simplex simplex noise, FBM fractal Brownian motion), cloud/terrain/fire/vertex deformation practical examples, noise animation, frequency & amplitude, five homework cases