Three.js 造物日记 on Feynman 的博客

01｜从零搭建 3D 项目架构

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

Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。

法线材质立方体在黑色背景上旋转浮动，不同面呈现不同颜色（法线方向映射为 RGB）

12｜噪声函数

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

上节课用 GLSL 数学函数画出了形状和渐变。本节课进入着色器的"灵魂工具"——噪声函数：从 random 的雪花到 Perlin 的连续云雾，从单层噪声到 FBM 的分形细节，最终用噪声驱动云雾、地形、火焰和顶点变形。

11｜GLSL 数学函数

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

上节课掌握了 GLSL 基础语法和 ShaderMaterial 的数据通道。本节课深入数学函数——mix / step / smoothstep 控制渐变与边界，sin / cos 制造波浪，dot / cross 做光照和 Fresnel，fract / mod 生成重复图案。这些函数是从"一张 UV 坐标"到"一幅画面"的核心工具链。

10｜GLSL 基础

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

前 9 课用的都是 Three.js 内置材质（MeshStandardMaterial、MeshBasicMaterial……）。本节课开始写自定义 shader —— 直接用 GLSL 和 GPU 对话，让渐变、波浪、Fresnel 这些效果完全由代码生成，不再依赖内置材质的预设参数。

09｜动画系统

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

前 8 课的动画都是在 requestAnimationFrame 循环里手动写位移和旋转。本节课引入 GSAP 补间动画和 Three.js 原生关键帧系统，让动画控制更优雅、更强大。

01 学习目标

本节课聚焦 Three.js 动画系统：

08｜模型加载

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

前 7 课我们一直在用代码创建几何体。真实项目中，3D 模型通常由美术在 Blender/Maya 中制作，导出为 GLTF/GLB 格式后加载到场景中。本节课掌握模型加载的完整流程：加载 → 压缩 → 缩放 → 动画。

07｜场景图与变换

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

场景图是 Three.js 的骨架系统。理解父子关系、变换继承和坐标系转换，就能用简单的几何体拼出复杂的 3D 结构。本节课通过太阳系模型和积木小动物拼装，深入理解场景图的树形结构。

06｜纹理与贴图

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

纹理是给 3D 物体「穿衣服」的过程。理解 UV 坐标、学会加载和控制纹理、掌握环境贴图的反射原理，就能让场景从「素模」变成「有质感的世界」。

01 学习目标

本节课聚焦 Three.js 纹理与贴图系统：

05｜相机与控制

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

相机决定了用户「从哪里看」和「看到多大范围」。掌握透视相机和正交相机的区别，理解视锥体和裁剪面，就能精确控制 3D 场景的视觉呈现。

04｜灯光与阴影

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

灯光是 3D 场景的灵魂。掌握 5 种灯光类型和阴影三要素，就能让场景从「扁平感」变成「有层次的真实世界」。

从左到右：Ambient、Hemisphere、Directional、Point、Spot 五种灯光效果对比，下方为不同分辨率的阴影质量展示

03｜材质系统

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

材质决定了物体表面如何与光线交互。掌握 6 种材质类型和 PBR 参数，就能让 3D 物体从"塑料感"变成"照片级真实"。

02｜几何体与图元

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

几何体是 3D 世界的积木。掌握 5 种基础图元，就能组合出几乎任何形状。

从左到右：Wireframe 球体（低分段）、Box、Sphere、Cylinder、Torus，底部为棋盘格纹理的 Plane 地面