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