为什么从 three.js 入手 3D
直接在浏览器里写 WebGL 并不轻松：着色器、矩阵、缓冲区都要手写。three.js 把这些底层封装成对象，你只需要关心场景里放什么、相机怎么看。它是目前前端 3D 内容最成熟的工具之一，社区示例多，遇到问题也容易找到参考。
第一步：把库引入项目
最省事的方式是用 ES 模块配合构建工具安装：
npm install three
然后在入口文件里按需导入，例如 import * as THREE from 'three'。如果只是做演示，也可以用 CDN 的模块版本，避免配置构建链。注意新版 three.js 已移除部分旧 API，跟着官方文档的版本走，能少踩很多坑。
第二步：理解场景三要素
three.js 的最小可运行结构由三部分组成，缺一不可：
场景 Scene
场景是一个容器，所有几何体、灯光都要加进去。它本身不渲染任何东西，只负责组织层级。
相机 Camera
常用透视相机 PerspectiveCamera，四个关键参数是视野角度、宽高比、近裁面、远裁面。相机不放进场景也能工作，但它的位置决定你看到什么，初学者最常见的”白屏”往往就是相机没对准物体。
渲染器 Renderer
WebGLRenderer 负责把场景画到画布上。创建后需要设置尺寸并挂到页面上，最后调用 renderer.render(scene, camera) 才会出图。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
const cube = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 0x44aa88 })
);
scene.add(cube);
renderer.render(scene, camera);
第三步：引入动画循环
静态画面只是开始。用 requestAnimationFrame 驱动渲染循环，在每帧里更新物体旋转或相机位置，画面才会动起来。需要注意的是，窗口尺寸变化时要同步更新相机的宽高比和渲染器尺寸，否则画面会拉伸。
第四步：处理好坐标与光照
没有灯光时，标准材质会显示为黑色，这是新手容易困惑的地方。可以先从 MeshBasicMaterial 入手，它不受光照影响；等场景跑通，再换成 MeshStandardMaterial 并添加环境光与方向光，观察明暗变化。坐标方面，默认相机朝 -Z 方向看，物体放在原点、相机沿 Z 轴后退是更直观的起点。
第五步：加载外部模型
实际项目很少全靠代码拼几何体。GLTF 格式是当前推荐的选择，用 GLTFLoader 加载后加入场景即可。模型加载是异步的，记得在回调里处理缩放和位置，否则容易出现模型过大或偏移的问题。加载前先确认模型单位与场景尺度匹配，能省下大量调试时间。
继续进阶的方向
掌握基础流程后，可以依次尝试动画系统、射线拾取、后期处理与性能优化。建议每次只加一个特性，保持示例可运行，这样学习 three.js 的过程会稳得多。
