Three.js中设置Mesh透明度需设material.transparent=true并赋值material.opacity，且须启用renderer.alpha=true；不支持动态调透明度，只能预处理GLB或改用Three.js手动遍历修改。
Three.js 中设置 Mesh 透明度的正确方式
HTML5 建模本身不直接支持透明度，实际依赖 WebGL 渲染库（如 Three.js）。直接改 HTML 标签或 opacity CSS 属性无效——它只影响容器层，不改变模型材质本身的 Alpha 混合行为。
关键在于：必须修改模型对应 Material 的透明相关属性，并启用 Alpha 混合。
-
material.transparent = true—— 必须显式开启，否则opacity被忽略 -
material.opacity = 0.6—— 取值范围0.0（全透）到1.0（不透），仅在transparent === true时生效 - 若使用
MeshStandardMaterial或MeshPhongMaterial，还需确保纹理贴图的 alpha 通道可用（如 PNG 带 Alpha）
用
style="opacity: 0.5" 只会让整个组件变淡（含背景、UI 控件），且可能引发 z-fighting 或遮挡异常。
可行路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 预处理 GLB 模型：用 Blender 或 glTF-Transform 工具，将材质的
alphaMode设为BLEND，并调整alphaCutoff或基础色alpha值，导出后加载即生效 - 降级使用 Three.js：移除
GLTFLoader加载，手动遍历scene.traverse()找到所有Mesh，统一设置material.transparent和material.opacity
Three.js 加载 GLB 后批量修改透明度的代码片段
常见错误是只改根对象或漏掉子材质。需递归遍历所有 Mesh，并兼容多种材质类型（如 MeshBasicMaterial、MeshStandardMaterial）。
loader.load('model.glb', (gltf) => {
gltf.scene.traverse((obj) => {
if (obj.isMesh) {
// 统一启用透明 + 设定透明度
obj.material.transparent = true;
obj.material.opacity = 0.4;
// 若材质是数组（多材质），需遍历每个元素
if (Array.isArray(obj.material)) {
obj.material.forEach(m => {
m.transparent = true;
m.opacity = 0.4;
});
}
// 强制更新材质以生效（尤其动态修改时）
obj.material.needsUpdate = true;
}
});
scene.add(gltf.scene);
});
透明度失效的三个高频原因
调了半天没反应？大概率卡在这几个点上：
- 未设
renderer.alpha = true（Three.js 初始化时）—— 导致背景非透明，掩盖模型半透效果 - 材质使用了
depthWrite: false但未配depthTest: false，造成渲染顺序混乱，部分面被错误裁剪 - 模型自带 PBR 材质且
alphaMode为MASK（非BLEND），此时opacity完全无效，必须改 glTF 文件或运行时替换材质
真正起作用的是材质层的混合模式和渲染器配置，不是视觉上的“调个透明度”那么简单。尤其多个半透明物体叠加时，排序和写入深度的处理稍有偏差，就会出现闪烁或穿帮。
