HTML5不提供3D建模功能，需借助Three.js等库；改模型颜色须修改材质color属性，遍历mesh并用set()赋值，注意纹理、顶点色、PBR参数及只读材质处理。
HTML5 本身不提供建模或材质系统；你实际在用的是基于 HTML5 的 3D 库（最常见的是 Three.js）。修改模型颜色，本质是修改其 Material 的颜色属性，不是改 HTML 标签样式。
Three.js 中改模型基础色：用 material.color.set()
加载完模型（比如用 GLTFLoader）后，模型的网格（Mesh）通常带默认材质。要统一改主色，遍历所有子对象并设置材质颜色：
model.traverse((obj) => {
if (obj.isMesh) {
obj.material.color.set(0xff5500); // 十六进制，等价于 new THREE.Color(0xff5500)
}
});
- 必须确保
obj.material存在且可写（部分 glTF 模型用MeshStandardMaterial，支持color） - 如果模型用了纹理（
map），color会与纹理做乘法混合——想完全覆盖纹理，得先清空material.map = null - 别直接赋值
obj.material.color = new THREE.Color(...)，这会断开引用，动画/更新可能失效
改金属度、粗糙度等 PBR 参数：针对 MeshStandardMaterial
现代 glTF 模型多用 PBR 材质，仅调 color 不够真实。需同步调整物理属性：
obj.material.metalness = 0.2; obj.material.roughness = 0.8; obj.material.color.set(0x4a90e2);
-
metalness范围是 0–1：0=非金属（塑料、布料），1=金属（铁、铝） -
roughness也是 0–1：越小越光滑反光，越大越哑光 - 这些值会影响光照响应，改完记得检查光源是否开启（
scene.add(new THREE.HemisphereLight())等）
批量替换材质时遇到 material is read-only
某些加载器（如 GLTFLoader）会把材质设为只读，直接赋值 obj.material = newMaterial 会报错或无效：
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
obj.material = obj.material.clone()再修改属性 - 或者用
obj.material = new THREE.MeshStandardMaterial({ ... })全新创建，但注意丢失原始纹理坐标/UV - 更安全的批量处理：用
loader.setMaterials(...)预设材质模板（Three.js r160+ 支持）
改完颜色没变化？优先检查这三件事
- 模型是否启用了
vertexColors: true？如果有顶点色，它会覆盖材质色——查obj.material.vertexColor并设为false - 场景里有没有
renderer.shadowMap.enabled = true但光源没 castShadow？阴影遮挡可能导致颜色发灰 - 是否在动画循环（
requestAnimationFrame）外修改？改完材质后，某些属性（如needsUpdate）需手动触发，例如obj.material.color.needsUpdate = true（一般不用，但复杂自定义材质时可能需要）
真正麻烦的从来不是怎么设颜色，而是搞清当前模型用的是哪种材质、有没有被纹理/顶点色/光照遮蔽——先 console.log(obj.material) 看一眼构造函数名，比盲目调色快十倍。
