Three.js：添加纹理后MeshPhongMaterial失去光泽问题求助

问题本质 #

启用纹理后杯子光泽暗淡斑驳、纹理仅显示在局部，核心原因有两点：

• 纹理干扰Phong材质高光计算：map纹理会直接用自身RGB值覆盖材质基础色，若纹理不是纯白基底的细节图，会破坏原本的白色陶瓷质感，导致光泽感骤降。
• 模型UV映射不完整：杯子仅"正面"有UV坐标，其他区域无对应映射，纹理无法渲染。

针对性解决方案 #

1. 保留光泽的纹理叠加方式 #

不要直接用map，改用alphaMap（适用于透明/灰度细节纹理），既保留白色陶瓷基底，又能叠加纹理：

const phongMaterial = new THREE.MeshPhongMaterial({
   color: 0xFFFFFF,       // 维持陶瓷白色基底
   shininess: 30,         // 保留原光泽度参数
   specular: 0x222222,    // 高光颜色不变
   alphaMap: texture,     // 用纹理alpha通道控制显示区域
   transparent: true      // 开启透明以支持alphaMap
});

如果是带颜色的花纹纹理，先确保纹理底色为纯白色，再使用map，避免覆盖材质基础色。

2. 修复纹理局部显示问题 #

方案A（推荐）：补全模型UV

在建模软件（如Blender）中给整个杯子模型重新展开UV，确保所有面都有对应坐标，导出新的GLB文件后重新加载。

方案B：强制纹理拉伸覆盖

不想修改模型的话，调整纹理的包裹与重复属性，强制覆盖整个模型：

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2, 1); // 根据杯子圆柱形态调整比例
texture.needsUpdate = true; // 必须更新纹理状态生效

注意：这种方式可能导致纹理轻微变形，但能快速解决局部显示问题。

3. 升级材质（更优选择） #

Phong材质属于老旧的光照模型，改用PBR标准的MeshStandardMaterial，能更真实模拟陶瓷质感，且叠加纹理后光泽保留更好：

const standardMaterial = new THREE.MeshStandardMaterial({
   color: 0xFFFFFF,
   roughness: 0.1,        // 粗糙度越低，表面越光滑
   metalness: 0.0,        // 陶瓷是非金属材质，设为0
   map: texture           // 直接叠加纹理也能维持光泽
});

验证操作 #

取消Codepen中第102行的注释，替换材质代码为上述任意方案，刷新预览即可看到效果。

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