1. 为什么选择 Three.js？
直接使用原生 WebGL 编写 3D 场景非常繁琐。你需要手动处理着色器编译、矩阵运算和缓冲区管理。Three.js 将这些底层细节封装成了直观的面向对象 API。
THREE.js Engine Active
实时演示：使用 Three.js 渲染的动态光影物体
2. 核心三大支柱
掌握 Three.js 只需理解以下三个概念的交互：
- Scene (场景): 存放物体、光源和相机的 3D 空间。
- Camera (相机): 观察者的眼睛，决定了视野 (FOV) 和位置。
- Renderer (渲染器): 将场景内容绘制到 HTML5 Canvas 上的引擎。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, ratio, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);3. 几何体与材质
物体由 Geometry (形状) 和 Material (表面外观) 组成。两者的结合被称为 Mesh (网格)。