从空白 HTML 搭出可运行的 renderer、相机、灯光、一个 mesh 与动画循环，并处理 resize。
最小场景
Bootstrap
场景构图
Scene
用 PlaneGeometry 顶点位移或噪声生成起伏地形，配合 OrbitControls 浏览。
RGBELoader 或 EXRLoader 加载环境贴图，scene.environment + PBR 材质。
用 Fog 或 FogExp2 拉开远景层次，配合同色地面与物体排布。
用 InstancedMesh 一次 draw call 绘制大量相同几何体，随机位置与缩放。
使用 Reflector 或平面镜像技巧做地面反射，适合产品展台。
Vite + three
WebGL 示意 · 可拖拽
FontLoader 加载 typeface.json，挤出文字作为场景标题。
着色器
Shader
用自定义顶点/片元着色器画全屏天空球或大球体背景，不依赖外部 HDR。
用 EffectComposer + UnrealBloomPass 给 emissive 物体加泛光，并说明性能注意点。
在片元着色器里把 N·L 量化成 3–4 阶，得到卡通渲染。
Vite + three
WebGL 示意 · 可拖拽
用 MeshNormalMaterial 或自定义 shader 输出视空间/世界空间法线，排查光照问题。
大平面 + 正弦位移顶点动画 + 菲涅尔近似片元高光，仿水面。
交互
Interaction
鼠标点击用 Raycaster 命中 mesh，高亮或弹出信息。
OrbitControls 开启阻尼，限制俯仰角与缩放距离，适合产品展示 turntable。
平移 / 旋转 / 缩放选中物体，与 OrbitControls 协作（拖拽 gizmo 时禁用轨道）。
点击画布锁定指针，鼠标移动控制 yaw/pitch，WASD 在 XZ 平面移动。
在 3D 锚点上叠 HTML 标签，适合数据点名称、设备铭牌。
加载
Loader
动画与粒子
Animation
小游戏原型
Game
性能与调试
Performance
