使用Google model-viewer加载GLB模型显苍白，如何提升对比度？

以下是几个可行的修复方案，按优先级排序：

1. 添加环境贴图增强光影细节 #

Model-Viewer默认环境光偏平淡，添加环境贴图能让模型产生自然的内部阴影和对比度。你可以使用内置的环境预设，或者引入本地HDR文件：

// 使用内置"studio"环境预设
model.setAttribute("environment", "studio");

// 或使用本地HDR文件（推荐）
// model.setAttribute("environment", "/path/to/your-environment.hdr");

2. 调整曝光参数 #

自动曝光可能导致模型整体亮度偏高、对比度被拉低，关闭自动曝光后手动微调曝光值：

model.setAttribute("auto-exposure", "false");
model.setAttribute("exposure", "0.8"); // 范围0-2，可根据效果调整

3. 优化阴影配置 #

除了已设置的shadow-intensity="1"，可以进一步调整阴影柔和度，同时确保模型能投射和接收阴影：

model.setAttribute("shadow-softness", "0.3"); // 0-1，数值越高阴影越柔和
model.setAttribute("cast-shadow", "true");
model.setAttribute("receive-shadow", "true");

4. CSS滤镜快速增强对比度 #

如果以上方法效果不够，可给模型组件添加CSS滤镜，快速提升对比度和饱和度：

.model-component {
  filter: contrast(1.3) saturate(1.1);
}

完整代码示例 #

整合上述设置后的代码：

const model = document.createElement("model-viewer");
model.setAttribute("src", url);
model.setAttribute("class", "model-component");
model.setAttribute("shadow-intensity", "1");
model.setAttribute("shadow-softness", "0.3");
model.setAttribute("cast-shadow", "true");
model.setAttribute("receive-shadow", "true");
model.setAttribute("environment", "studio");
model.setAttribute("auto-exposure", "false");
model.setAttribute("exposure", "0.8");
model.setAttribute("ar", "");               
model.setAttribute("camera-controls", "");
document.body.appendChild(model);

对应CSS：

.model-component {
  width: 100%;
  height: 600px; /* 根据布局调整尺寸 */
  filter: contrast(1.3) saturate(1.1);
}

内容的提问来源于stack exchange，提问作者Jacobian