Three.js Creation Diary on Feynman's Blog

12 | Noise Functions

Mon, 31 Aug 2026 12:00:00 +0800

In the previous lesson, we used GLSL math functions to draw shapes and gradients. This lesson enters the “soul tool” of shaders — noise functions: from random’s snow to Perlin’s continuous clouds, from single-layer noise to FBM’s fractal detail, ultimately driving clouds, terrain, fire, and vertex deformation.

01 Learning Objectives

This lesson focuses on noise function principles and practice:

Understand the core differences between Perlin Noise and Simplex Noise
Master FBM (Fractal Brownian Motion) principles and applications
Learn to create organic effects with noise (clouds, terrain, fire)
Understand vertex deformation using noise in vertex shaders
Master two ways to animate noise (moving sample point / changing frequency)

02 What Is Noise — Continuous Pseudorandom Function

Noise is a continuous pseudorandom function: neighboring points have similar values, but the overall pattern appears random.

11 | GLSL Math Functions

Tue, 25 Aug 2026 12:00:00 +0800

Last lesson covered GLSL basics and ShaderMaterial data channels. This lesson dives deep into math functions — mix / step / smoothstep for gradients and boundaries, sin / cos for waves, dot / cross for lighting and Fresnel, fract / mod for repeating patterns. These functions form the core toolchain from “a UV coordinate” to “a final image”.

01 Learning Objectives

This lesson focuses on practical applications of GLSL math functions:

07 | Scene Graph and Transformations

Fri, 24 Jul 2026 12:00:00 +0800

The scene graph is the skeleton system of Three.js. Understanding parent-child relationships, transform inheritance, and coordinate system conversion allows you to build complex 3D structures from simple geometry. This lesson explores the solar system model and block-based animal assembly to deeply understand the scene graph’s tree structure.

01 Learning Objectives

This lesson focuses on Three.js scene graph and transform system:

Understand the scene graph tree structure
Master parent-child relationships and transform inheritance
Distinguish local versus world coordinate systems
Learn Object3D grouping management
Master scene.traverse() traversal
Learn AxesHelper / GridHelper debugging

02 Scene Graph Tree Structure

What is a Scene Graph

All objects in Three.js are organized as a tree, with scene as the root node. A child object’s transform (position/rotation/scale) is relative to its parent. When the parent transforms, all children follow.

06 | Textures and Mapping

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

Textures are how you “dress up” 3D objects. Understanding UV coordinates, learning to load and control textures, and mastering environment map reflections will transform your scene from “bare models” to a “world with质感”.

01 Learning Objectives

This lesson focuses on Three.js texture and mapping system:

Master TextureLoader for loading image textures
Understand UV coordinates and texture mapping
Learn to control texture repeat, offset, and wrap
Master CubeTextureLoader for skybox loading
Master environment maps (envMap) and reflections
Understand RGBELoader for HDRI environment maps

02 Texture Basics

What is a Texture

A texture is the process of “sticking” a 2D image onto a 3D object’s surface. Three.js maps image pixels to each vertex of the geometry using UV coordinates.

05 | Cameras and Controls

Sun, 19 Jul 2026 12:00:00 +0800

The camera determines “where you look from” and “how much you see”. Master the difference between perspective and orthographic cameras, understand frustum and clipping planes, and you can precisely control the visual presentation of a 3D scene.

01 Learning Objectives

This lesson focuses on Three.js cameras and controls:

Distinguish PerspectiveCamera and OrthographicCamera
Master OrbitControls configuration
Understand camera parameters (fov, aspect, near, far)
Learn camera switching and parameter adjustment

02 Perspective vs Orthographic Camera

Feature	Perspective Camera	Orthographic Camera
Perspective	Near-far scale	Uniform scale
Light convergence	Diverges from a point	Parallel (no convergence)
Frustum shape	Truncated pyramid	Rectangular box
Use case	3D games, realistic scenes	CAD, 2D games, UI

/**
 * Perspective Camera — Simulates human eye
 *
 * Near-far scale, suitable for 3D scenes, games, realistic rendering.
 *
 * PerspectiveCamera(fov, aspect, near, far)
 * fov — Field of view (degrees), wider = more distortion
 * aspect — Aspect ratio (width/height), must update on resize
 * near — Near clipping plane, closer objects hidden
 * far — Far clipping plane, farther objects hidden
 */
const perspectiveCamera = new THREE.PerspectiveCamera(50, aspect, 0.1, 100)
perspectiveCamera.position.set(5, 5, 10)
perspectiveCamera.lookAt(0, 0, 0)

/**
 * Orthographic Camera — No perspective effect
 *
 * Uniform scale, suitable for CAD, architecture preview, 2D games.
 *
 * OrthographicCamera(left, right, top, bottom, near, far)
 * left/right — Visible range horizontal bounds
 * top/bottom — Visible range vertical bounds
 * near/far — Near/far clipping planes
 *
 * Note: Must maintain aspect ratio with screen, otherwise objects stretch
 */
const frustumSize = 10
const orthographicCamera = new THREE.OrthographicCamera(
 -frustumSize * aspect / 2, // left
 frustumSize * aspect / 2, // right
 frustumSize / 2, // top
 -frustumSize / 2, // bottom
 0.1, // near
 100 // far
)

03 Camera Parameters

Parameter	Meaning	Perspective	Orthographic
FOV	Field of view angle	30°-120°	N/A
aspect	Aspect ratio	width/height	width/height
near	Near clipping plane	Closer hidden	Closer hidden
far	Far clipping plane	Farther hidden	Farther hidden
frustumSize	Visible range height	N/A	Controls visible range

FOV and Perspective Distortion

Small FOV (e.g. 30°) → Narrow view (telephoto), objects look large, weak distortion
Large FOV (e.g. 120°) → Wide view (wide-angle), objects look small, strong distortion

Near/Far Clipping Planes

Large Near/Far ratio causes depth precision loss (far objects flicker):

04 | Lights and Shadows

Fri, 17 Jul 2026 10:00:00 +0800

Lights are the soul of a 3D scene. Master 5 light types and the three shadow elements to transform your scene from “flat” to a layered, realistic world.

Left to right: Ambient, Hemisphere, Directional, Point, Spot — five light types comparison, with shadow quality showcase at different resolutions below

01 Learning Objectives

This lesson focuses on the Three.js lights and shadows system:

03 | Material System

Thu, 16 Jul 2026 10:00:00 +0800

Materials determine how object surfaces interact with light. Master 6 material types and PBR parameters to transform 3D objects from “plastic look” to “photorealistic”.

01 Learning Objectives

This lesson focuses on the Three.js material system:

Distinguish 6 material types and their use cases
Understand PBR material roughness and metalness parameters
Master environment mapping (CubeTexture) for reflection effects
Understand normal mapping principles and usage
Learn to use TextureLoader for external texture loading

02 Material Types Comparison

Three.js provides multiple material types, each suitable for different scenarios:

02 | Geometry and Primitives

Fri, 10 Jul 2026 10:00:00 +0800

Geometry is the building block of the 3D world. Master 5 basic primitives and you can combine almost any shape.

01 Learning Objectives

This lesson focuses on Three.js built-in geometries:

Master the constructors and parameters of 5 basic geometries
Understand the relationship between segments and vertex count
Learn to combine multiple primitives into complex objects
Understand Wireframe visualization principles
Learn procedural texture generation (Canvas)

02 The Nature of Geometries

Three.js geometries are essentially collections of vertex data:

01 | Building 3D Project Architecture from Scratch

Tue, 07 Jul 2026 10:00:00 +0800

Everything in Three.js starts with three objects: Scene (stage), Camera (lens), Renderer (projector). Master this trio and you have your ticket to the 3D world.

Normal material cube rotating and floating on a black background, different faces showing different colors (normal direction mapped to RGB)

01 Learning Objectives

This lesson builds a complete Three.js project from scratch:

Set up Vite + TypeScript + Three.js project scaffold
Understand the responsibilities of Scene / Camera / Renderer
Master requestAnimationFrame + delta time animation loop
Learn window resize handling and pixel ratio settings

02 The Three.js Trio

Everything in Three.js starts with three objects: