HTML5本身不支持建模与反射，需通过WebGL（如Three.js）实现；反射依赖MeshStandardMaterial的metalness、roughness、envMap及光照配置，且必须正确加载环境贴图并设置depthWrite: false。
HTML5 本身不支持直接建模或材质反射——它只是标记语言，没有渲染管线。所谓“HTML5 建模加反射”，实际依赖的是 WebGL（通常通过 Three.js 这类库实现），而反射效果必须由着色器（ShaderMaterial）或环境贴图（envMap）驱动。
Three.js 中用 MeshStandardMaterial 开启金属/玻璃反射
这是最常用、兼容性最好、且无需手写 shader 的方式。关键不是“打开反射开关”，而是正确配置材质物理参数和场景光照/环境。
-
metalness控制金属感：0 = 非金属（如塑料、陶瓷），1 = 纯金属（如铝、不锈钢）；值越高，基础反射越强，且反射颜色越接近环境光而非漫反射色 -
roughness控制模糊度：0 = 镜面反射（清晰倒影），1 = 完全漫反射（无反射）；玻璃常设为 0.0–0.1，磨砂金属可设 0.3–0.6 - 必须设置
scene.environment或给单个材质指定material.envMap，否则metalness和roughness不生效（默认是黑环境，反射=黑） - 需要至少一个
DirectionalLight或PointLight，否则MeshStandardMaterial会完全变黑（它不自发光）
怎么获取可用的 envMap（环境贴图）
反射质量直接受 envMap 影响。浏览器不提供默认环境贴图，你得自己加载。常见做法：
- 用
THREE.CubeTextureLoader加载 6 张立方体贴图（前/后/上/下/左/右），适合静态场景 - 更简单：用
THREE.RGBELoader加载单张 HDR 环境图（如city.hdr），自动转为CubeTexture，推荐初学者用 - 快速测试可用免费资源：SwedishRoyalCastle（Three.js 官方示例立方体）、Poly Haven（免费 HDR 环境图）
- 避免用 JPEG/PNG 当
envMap——它们动态范围低，反射发灰、无高光细节
玻璃材质要透明 + 反射，但别漏掉这两步
纯玻璃不是“高 metalness”，而是 metalness: 0 + transparent: true + 合理 opacity，再配合 envMap 模拟反射。常见错误：
立即学习“前端免费学习笔记（深入）”；
- 只设
transparent: true和opacity: 0.8，但没设depthWrite: false→ 玻璃后方物体会被错误裁剪或排序错乱 - 没启用
renderer.physicallyCorrectLights = true→ 光照计算不匹配 PBR 流程，反射亮度失真 - 玻璃模型用了双面渲染（
side: THREE.DoubleSide），但没关背面剔除（material.depthTest = false在某些角度会导致 Z-fighting） - 想模拟折射？
MeshStandardMaterial不支持；必须换ShaderMaterial+ 自定义折射向量计算，代价高，一般用假折射（偏移纹理坐标）替代
const glassMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.9,
metalness: 0,
roughness: 0.02,
envMap: environmentCubeTexture,
depthWrite: false, // 关键！否则透明物体遮挡异常
side: THREE.DoubleSide
});
为什么本地测试时反射是黑的？
最常见原因：跨域限制导致 envMap 加载失败，控制台报 Cross-Origin Request Blocked，但 Three.js 默认静默失败，material.envMap 保持 null。
- 用
npm start或python3 -m http.server启动本地服务器，不要直接双击打开 HTML - 检查控制台是否有
THREE.CubeTextureLoader: Couldn't load URL类错误 - 临时验证：在加载成功后加一行
console.log(material.envMap);，确认不是null - 若用
RGBELoader，注意它返回的是 Promise，需await或.then()，不能直接赋值给envMap
反射不是开关，是光照、材质、环境、渲染设置共同作用的结果。最容易被忽略的是 envMap 加载失败和 depthWrite: false 缺失——这两个问题占了调试反射的七成以上时间。
