Three.js怎么工作的？
Three.js 是怎么工作的？
Three.js 的核心工作是：
构建一个虚拟的 3D 世界（Scene）
模拟摄像机视角（Camera）
用 WebGL 把这个场景“渲染成一张图片”
把这张图片画在 canvas 上
👉 所以 Three.js 最终的任务就是：画一张图像到 canvas 上，就像摄影师拍照后，把照片贴在 canvas 上一样。
角色 功能 Three.js 把场景、物体、灯光、摄像机等组织成数据结构，并自动转成 WebGL 命令 WebGL 把这些命令送到 GPU，画三角形（顶点 ➜ 图形 ➜ 像素） Canvas 接收 WebGL 画出来的图像并显示
WebGL 干了什么？
WebGL 不直接“画像素”
它会画很多三角形
然后由GPU负责把这些三角形“光栅化”为像素，显示在屏幕上
为什么三角形？
因为任何复杂图形都能用一堆三角形拼出来（这是 GPU 最擅长处理的基本单位）。
Three.js (描述3D场景)Three.js 搭建了一个虚拟的三维世界，里面有物体、灯光、摄像机等等，好比你在搭积木，摆放场景。
↓
WebGL (把3D转换为2D图像)WebGL 就像一台“虚拟相机”，它帮你从某个角度拍这整个三维积木世界，但拍出来的是一张“平面的照片”，把三维的东西变成二维图。
↓
Canvas (接收图像并显示在屏幕上)个“照片”得放个地方展示，Canvas 就是电脑网页上的“画布”，用来展示 WebGL 拍出来的这张二维图。
↓
用户看到的是像素点组成的画面
你用手机拍一栋建筑，这栋建筑是3D的，真实有高有宽有深。
但是你拍出来的是一张“二维照片”，只有长和宽，是平的。
你看这张照片，感觉建筑有立体感，是因为照片里有阴影、远近和透视。
Three.js 和 WebGL 做的事情就是：
帮你“用程序”拍一张虚拟的“二维照片”，它是用数学算出来的，但看起来有三维效果。
这个“照片”就是画在网页上的那个 canvas 里的图。