Three.js 是怎么工作的？

Three.js 的核心工作是：

1. 构建一个虚拟的 3D 世界（Scene）

2. 模拟摄像机视角（Camera）

3. 用 WebGL 把这个场景“渲染成一张图片”

4. 把这张图片画在 canvas 上

👉 所以 Three.js 最终的任务就是：画一张图像到 canvas 上，就像摄影师拍照后，把照片贴在 canvas 上一样。

角色	功能
Three.js	把场景、物体、灯光、摄像机等组织成数据结构，并自动转成 WebGL 命令
WebGL	把这些命令送到 GPU，画三角形（顶点 ➜ 图形 ➜ 像素）
Canvas	接收 WebGL 画出来的图像并显示

WebGL 干了什么？

1. WebGL 不直接“画像素”

2. 它会画很多三角形

3. 然后由GPU负责把这些三角形“光栅化”为像素，显示在屏幕上

为什么三角形？

因为任何复杂图形都能用一堆三角形拼出来（这是 GPU 最擅长处理的基本单位）。

 Three.js (描述3D场景)Three.js 搭建了一个虚拟的三维世界，里面有物体、灯光、摄像机等等，好比你在搭积木，摆放场景。 
  ↓
WebGL (把3D转换为2D图像)WebGL 就像一台“虚拟相机”，它帮你从某个角度拍这整个三维积木世界，但拍出来的是一张“平面的照片”，把三维的东西变成二维图。
  ↓
Canvas (接收图像并显示在屏幕上)个“照片”得放个地方展示，Canvas 就是电脑网页上的“画布”，用来展示 WebGL 拍出来的这张二维图。
  ↓
用户看到的是像素点组成的画面

• 你用手机拍一栋建筑，这栋建筑是3D的，真实有高有宽有深。

• 但是你拍出来的是一张“二维照片”，只有长和宽，是平的。

• 你看这张照片，感觉建筑有立体感，是因为照片里有阴影、远近和透视。

• Three.js 和 WebGL 做的事情就是：

• 帮你“用程序”拍一张虚拟的“二维照片”，它是用数学算出来的，但看起来有三维效果。

• 这个“照片”就是画在网页上的那个 canvas 里的图。