3D on Feynman's Blog

moeru.ai | Elastic Tag & Dot Grid

Sat, 01 Aug 2026 10:00:00 +0800

This article clones the two most immersive interactive modules from the moeru.ai landing page: dot grid physics interaction and 3D tag Verlet elastic rope system. It does not cover the variable font pressure animation or GitHub member avatar loading.

01 Overall Architecture & Tech Choices

The original site is a single-page immersive landing page whose core interactions consist of 4 modules. This article focuses on two of them:

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:

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:

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: