Vue.js

Appearance

On this page

序言 ​

为什么写这本书 ​

当你完成了 Canvas 2D 图形编程的学习，是否想过如何进入三维世界？从平面到立体，从 2D 到 3D，这不仅仅是维度的增加，更是思维方式的转变。而这一切的基础，就是数学。

3D 图形学中的数学并不复杂，但却至关重要。向量、矩阵、四元数——这些看似抽象的数学概念，实际上是描述 3D 世界的语言。掌握它们，你就能够：

  • 理解物体在 3D 空间中的位置和朝向
  • 实现平滑的旋转和缩放动画
  • 将 3D 世界投影到 2D 屏幕上
  • 实现相机的自由移动和视角切换
  • 进行精确的碰撞检测和物理模拟

然而，许多开发者在学习 WebGL 或 Three.js 时，常常因为缺乏数学基础而感到困惑。本书的目标就是填补这一空白，用最直观的方式讲解 3D 图形学数学，让每一个概念都配合可视化示例，让每一行公式都对应可运行的代码。

本书的特色 ​

1. 可视化学习 ​

数学是抽象的，但图形是直观的。本书的每一个数学概念都配有可视化示例：

  • 向量运算：通过箭头和几何图形直观展示
  • 矩阵变换：通过坐标系和物体的实时变换展示
  • 投影变换：通过相机视角的动态演示展示
  • 四元数旋转：通过 3D 物体的平滑旋转展示

你不需要死记硬背公式，只需要理解它们的几何意义。

2. 代码实现 ​

本书不仅讲解数学原理，更重要的是教你如何用 JavaScript 实现：

  • 从零开始构建完整的 3D 数学库
  • 实现 Vector3、Matrix4、Quaternion 等核心类
  • 代码风格与 Three.js 保持一致
  • 每个类都有完整的单元测试

完成本书后，你将拥有一个自己手写的 3D 数学库，这将成为你深入理解 Three.js 的基石。

3. 渐进式学习 ​

本书从最简单的向量开始，逐步深入：

  • 从 2D 到 3D：先回顾 2D 向量和矩阵，再扩展到 3D
  • 从简单到复杂：先学基础运算，再学复合变换
  • 从理论到实践：先理解原理，再动手实现，最后应用到实际场景

每个章节都建立在前一章的基础上，形成完整的知识体系。

4. 面向 Three.js ​

本书的所有内容都与 Three.js 紧密对应：

  • API 设计一致：实现的数学库 API 与 Three.js 保持一致
  • 命名规范统一：类名、方法名都参考 Three.js
  • 应用场景对齐：所有示例都是 Three.js 中的实际应用场景

学完本书，你将能够轻松理解 Three.js 中的任何数学相关代码。

适合谁读 ​

本书适合以下读者：

  • 完成 Canvas 2D 学习的开发者：已经掌握 2D 图形编程，准备进入 3D 领域
  • 准备学习 WebGL 的开发者：需要补充 3D 数学基础知识
  • Three.js 使用者：能用 Three.js，但对底层数学原理不够理解
  • 图形学爱好者：对 3D 图形编程感兴趣，想要系统学习数学基础

前置知识要求：

  • ✅ 掌握 JavaScript 基础语法
  • ✅ 了解基础的 2D 向量和矩阵概念（可通过 Book 1 学习）
  • ✅ 熟悉基本的三角函数（sin、cos、tan）

如何阅读本书 ​

阅读路径 ​

本书按照从简单到复杂的顺序组织：

  1. 第一至二部分（向量与矩阵）：3D 数学的基石，必须扎实掌握
  2. 第三至四部分（变换与坐标）：理解 3D 空间中的运动和坐标系统
  3. 第五部分（投影）：理解 3D 到 2D 的转换，这是渲染的核心
  4. 第六至七部分（四元数与几何）：高级主题，解决实际问题

学习建议 ​

  • 边学边练：每个概念都配有代码示例，建议动手实现
  • 可视化验证：使用提供的可视化工具验证你的理解
  • 构建数学库：跟随本书逐步构建完整的 3D 数学库
  • 关联 Three.js：学习每个概念时，思考它在 Three.js 中的应用

配套资源 ​

  • 代码仓库：所有示例代码和完整的数学库实现
  • 在线演示：每个概念的交互式可视化演示
  • 练习题：每章末尾的巩固练习

本书结构 ​

全书共 8 个部分，45 个章节：

  • 第一部分（5章）：向量运算——3D 图形学的基础工具
  • 第二部分（5章）：矩阵运算——描述变换的数学工具
  • 第三部分（8章）：3D 变换——让物体动起来，理解法线变换
  • 第四部分（5章）：坐标系统——理解不同的空间，包含切线空间
  • 第五部分（5章）：投影变换——从 3D 到 2D，深度缓冲原理
  • 第六部分（6章）：四元数——优雅的旋转表示与插值
  • 第七部分（6章）：几何运算——碰撞检测与空间查询
  • 第八部分（5章）：综合实战——完整数学库与性能优化

写作约定 ​

  • 代码风格：遵循 JavaScript ES6+ 规范，使用 class 语法
  • 命名规范：类名使用大驼峰（PascalCase），方法名使用小驼峰（camelCase）
  • 注释说明：关键代码都有详细注释，复杂算法有步骤说明
  • 数学符号：使用标准的数学符号，并提供中文说明

致谢 ​

感谢所有为 3D 图形学教育做出贡献的前辈，特别是 Three.js、Babylon.js 等开源项目的维护者。本书的许多灵感来自于他们的优秀实现。

现在，让我们开始这段激动人心的 3D 数学之旅吧！

祝你学习愉快！

在 GitHub 上编辑此页