HTML5本身不提供3D建模与灯光功能，实际依赖WebGL及Three.js实现；Three.js需配置AmbientLight、DirectionalLight、PointLight/SpotLight三类光源，缺一不可，且阴影需显式开启并逐对象授权。
HTML5 本身不提供建模或灯光功能——它只是容器。真正负责 3D 渲染、模型加载和灯光控制的是 WebGL（底层）或其封装库，最常用的是 Three.js。所谓“HTML5 建模灯光”，实际是用 Three.js 在 HTML 页面中创建 3D 场景并配置光源。
Three.js 中必须用的三种基础光源类型
没有光源，MeshStandardMaterial 或 MeshPhysicalMaterial 这类基于物理的材质会完全变黑；仅靠 MeshBasicMaterial 能显示颜色，但无明暗、无立体感。
-
AmbientLight：全局环境光，只影响亮度基底，不投射阴影、无方向。适合补光，避免纯黑死角，但加太多会“洗掉”体积感 -
DirectionalLight：类似太阳光，平行光，方向明确，能投射阴影，是塑造形体主结构的核心光源 -
PointLight或SpotLight：点光源/聚光灯，用于局部强调（如模型顶部高光、边缘补光），增强空间纵深
打光失败的典型表现与对应调整
模型看起来“平”“灰”“发飘”，往往不是模型问题，而是光源配置失当：
- 全黑或只有轮廓亮 → 漏了
AmbientLight或强度太低（建议从0.2起调） - 阴影边缘锯齿严重 → 未启用阴影贴图或分辨率太低：
renderer.shadowMap.enabled = true，且设renderer.shadowMap.type = THREE.PCFSoftShadowMap - 模型某侧死黑、无过渡 → 主光源
DirectionalLight角度太正（如直接照正面），应偏移 20°–45°，并搭配一个较弱的反向PointLight（强度约主光 1/3）做辅光 - 金属/光滑材质没高光 → 材质用了
MeshStandardMaterial但没开metalness/roughness，或光源强度不足（intensity至少 1.5 起）
阴影设置的关键三步（常被跳过的坑）
即使加了 DirectionalLight，默认也不产生阴影——Three.js 要求显式开启且逐对象授权：
立即学习“前端免费学习笔记（深入）”；
- 开启渲染器阴影：
renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
- 设置光源可投射阴影：
directionalLight.castShadow = true;
- 设置接收阴影的模型（如地面、其他静态物体）：
mesh.receiveShadow = true;
；需要投射阴影的模型（如人物、道具）：mesh.castShadow = true;
漏掉任意一步，阴影就失效。尤其注意：相机视锥（light.shadow.camera）默认范围很小，模型超出就会“丢影”，需手动扩大：light.shadow.camera.left/right/top/bottom 或用 light.shadow.camera.fit() 自适应。
移动端适配与性能提醒
在手机上开阴影、多光源、PBR 材质极易掉帧。真实项目中建议：
- 低端设备关闭
castShadow，改用烘焙阴影贴图或 CSS 模拟投影 - 避免同时使用 >3 个动态光源；用
LightProbe替代部分AmbientLight提升 PBR 真实感且更轻量 -
SpotLight的penumbra和decay参数对性能敏感，移动端慎用高值
打光不是堆光源数量，而是控制方向、衰减、强度比。一个调准的 DirectionalLight 加一盏柔和辅光，远比五盏乱照的灯更显立体——这点在 Three.js 里比在 Blender 里更需要手调验证。
