HTML5本身不支持3D建模或阴影渲染，所谓“HTML5建模阴影”实为WebGL（如Three.js）实现的实时GPU渲染效果；启用阴影需同时满足四条件：renderer.shadowMap.enabled=true、light.castShadow=true、mesh.castShadow=true、mesh.receiveShadow=true。
HTML5 中没有“建模阴影”这个概念
HTML5 本身不提供 3D 建模或实时阴影渲染能力。你看到的“HTML5 建模阴影效果”，实际是通过 WebGL（常借助 Three.js）在浏览器中运行的 3D 渲染结果，阴影由 GPU 实时计算生成，而非 HTML/CSS 原生支持。
Three.js 中启用实时阴影的关键四步
使用 Three.js 实现带阴影的 3D 场景，必须同时满足四个条件，缺一不可，否则阴影不显示或全黑：
-
renderer.shadowMap.enabled = true：全局开启阴影贴图计算 -
light.castShadow = true：指定哪盏灯能投射阴影（如DirectionalLight或SpotLight） -
mesh.castShadow = true：让物体自身能投出阴影（例如模型、立方体） -
mesh.receiveShadow = true：让物体表面能接收并显示其他物体投来的阴影（例如地面平面）
漏掉任意一项，阴影就会失效——最常见的是只设了 castShadow 却忘了 receiveShadow，导致地面一片 flat 白色，毫无阴影。
性能与精度取舍：shadowMap 的分辨率和类型
renderer.shadowMap 默认使用 PCFSoftShadowMap（推荐），但分辨率低会导致阴影边缘锯齿或模糊。可通过以下方式调整：
立即学习“前端免费学习笔记（深入）”；
- 提高分辨率：
renderer.shadowMap.width = 2048；renderer.shadowMap.height = 2048（默认 1024，过高会增加 GPU 内存压力） - 避免用
BasicShadowMap：它不支持软阴影，边缘硬且闪烁明显 - 注意
light.shadow.camera范围：若设置过小，阴影会“被裁掉”；过大则精度下降，阴影发虚
const light = new THREE.DirectionalLight(0xffffff, 1); light.castShadow = true; light.shadow.mapSize.width = 2048; light.shadow.mapSize.height = 2048; // 关键：缩小阴影相机范围，聚焦场景主体 light.shadow.camera.left = -10; light.shadow.camera.right = 10; light.shadow.camera.top = 10; light.shadow.camera.bottom = -10; light.shadow.camera.near = 0.1; light.shadow.camera.far = 50;
常见阴影不出现的三个真实错误现象
调试时遇到阴影消失，大概率是下面之一：
- 控制台报错
"THREE.WebGLRenderer: ShadowMap not supported"→ 浏览器不支持 WebGL2 或禁用了硬件加速，换 Chrome/Firefox 并检查chrome://gpu - 阴影只在部分角度可见，换个视角就没了 →
light.shadow.camera的视锥没覆盖当前视角中的阴影投射区域，需动态适配或扩大范围 - 阴影呈纯黑块、无渐变、边缘崩坏 → 模型法线翻转（
geometry.normalsNeedUpdate = true未调用），或材质用了MeshBasicMaterial（不响应光照，自然也不参与阴影计算）
真正起作用的不是“开启阴影开关”，而是光源、物体、接收面、渲染器四者之间精确的协作关系。少一个 true，就等于没开。
