MeshStandardMaterial 贴图不显示的根本原因是未启用光照响应，必须配合 DirectionalLight 或 EnvironmentLight；还需检查 UV 展开、纹理尺寸为 2 的幂、sRGB 编码及 normalMap 格式等。
Three.js 中 MeshStandardMaterial 为什么 贴不上纹理？
多数人卡在这一步：模型加载成功，但 map 贴图始终不显示，表面灰白或纯色。根本原因不是图片路径错，而是材质未启用光照响应——MeshStandardMaterial 是 PBR 材质，必须配合 DirectionalLight 或 EnvironmentLight 才能正确渲染纹理明暗细节。
- 漏加光源时，
map纹理会“存在但不可见”，控制台无报错 - 若用
MeshBasicMaterial倒是能立刻看到贴图，但它不响应光照，不适合真实感建模 - 确保纹理图像尺寸为 2 的幂（如 512×512、1024×1024），否则部分 显卡 会自动降级或黑边
纹理坐标（UV）错乱导致拉伸 / 翻转怎么办？
常见现象是贴图扭曲、镜像、局部重复——这几乎全是 UV 展开问题，和 Three.js 代码关系不大，需回溯建模软件（Blender / Maya）导出前的 UV 检查。
- Blender 中按
U→Smart UV Project后务必进UV Editing工作区检查是否重叠、拉伸 - 导出 glTF 时勾选
Include > UVs（glTF 默认包含，但某些插件会关掉） - 运行时可临时调试：给材质加
wireframe: true，再叠加color: 0xff0000，观察网格与纹理对应关系
如何让一张纹理同时控制颜色、粗糙度和法线？
真实项目中不会只用 map，PBR 流程需要多纹理协同。Three.js 支持直接赋值，但要注意通道和格式。
const textureLoader = new THREE.TextureLoader(); const baseColorMap = textureLoader.load('texture_base.jpg'); const roughnessMap = textureLoader.load('texture_roughness.jpg'); const normalMap = textureLoader.load('texture_normal.jpg'); // 注意：roughnessMap 必须和 baseColorMap 尺寸一致，且推荐使用单通道灰度图 // normalMap 需开启 .normalScale 并设为 Vector2(1, 1) const material = new THREE.MeshStandardMaterial({map: baseColorMap, roughnessMap: roughnessMap, normalMap: normalMap, normalScale: new THREE.Vector2(1, 1), metalness: 0.2 // 全局金属度，可配合 metalnessMap 进一步细化 });-
roughnessMap和metalnessMap必须是灰度图，Three.js 只读取 R 通道 -
normalMap必须是 OpenGL 格式（Y 向上），Blender 默认导出的是 DirectX 格式，需在 Blender 中勾选Export > Tangent Space > Flip Y - 所有纹理建议统一用
texture.encoding = THREE.sRGBEncoding（baseColorMap）或THREE.LinearEncoding（其他贴图），否则色彩发灰或过曝
加载多个纹理时卡顿或内存暴涨怎么优化？
一个角色模型配 4–5 张 2K 纹理，未压缩下超 100MB，首屏加载慢、低端设备 OOM。关键不在代码逻辑，而在资源交付方式。
立即学习 “ 前端免费学习笔记（深入）”；
- 用
DRACOLoader压缩几何体，用KTX2Loader+MeshoptDecoder加载 GPU-ready 的.ktx2纹理（体积比 JPEG 小 60%，支持 ASTC/BPTC） - 避免在
onLoad回调里直接创建材质，先缓存Texture实例，复用同一张图给多个模型 - 移动端务必设置
texture.minFilter = THREE.LinearMipmapLinearFilter并生成 mipmap（texture.generateMipmaps = true），否则远处纹理闪烁或模糊
贴图这事，90% 的问题出在建模阶段的 UV 和导出设置，剩下 10% 在 Three.js 的 编码 细节——比如忘了 renderer.physicallyCorrectLights = true，或者把 normalMap 当成 map 去加载。别急着改 JS，先打开 Blender 检 UV。
