场景 · 相机 · 渲染器

三件套

three.js 把一帧画面拆成三个对象：

• Scene（场景）：一棵对象树，所有要画的东西（网格、灯光、相机）都挂在上面。
• Camera（相机）：决定从哪里、以什么视角看场景。最常用的是 PerspectiveCamera(fov, aspect, near, far)。
• Renderer（渲染器）：把场景通过相机投影到 <canvas> 上，底层调用 WebGL（或 WebGPU）。

网格 = 几何体 + 材质

Mesh 由 Geometry（形状，顶点数据）和 Material（外观，最终会编译成着色器）组成。MeshStandardMaterial 是基于物理的材质（PBR），需要灯光才能看见。

渲染循环

浏览器每帧调用一次 renderer.setAnimationLoop 里的回调：先更新物体状态，再 renderer.render(scene, camera)。用 Timer.getDelta() 得到帧间隔，让动画速度与帧率无关。

尺寸与像素比

画布尺寸变化时要同时更新 renderer.setSize 和 camera.aspect，否则画面会被拉伸。setPixelRatio 控制高分屏清晰度，通常限制在 2 以内以节省性能。