Three.js使用OBJLoader2加载OBJ模型时纹理粗糙及法线贴图问题

我之前也碰到过类似的坑——OBJLoader2在网格平滑处理上确实表现出色，但加载后纹理糙得没法看，十有八九是法线贴图的配置出了问题。咱们一步步拆解排查：

• 先确认法线贴图的加载与赋值是否正确
  首先得确保你是用TextureLoader正确加载了法线贴图，并且把它绑定到了材质的normalMap属性上，示例代码如下：

  const textureLoader = new THREE.TextureLoader();
  const normalMap = textureLoader.load('your-normal-map-path.png');
  const material = new THREE.MeshStandardMaterial({
    normalMap: normalMap
    // 其他材质参数
  });
  

  同时要检查法线贴图本身的格式是否合规（一般是带Alpha通道的PNG），如果贴图文件损坏或者通道信息丢失，肯定会导致纹理渲染异常。

• 调整法线贴图的缩放参数
  OBJLoader2处理后的模型，UV映射可能和其他加载器有细微差异，这时候可以尝试调整normalScale参数来修正：

  material.normalScale.set(1, 1); // 可以尝试修改数值，比如换成(0.5, 0.5)或者(-1, 1)排查翻转问题
  

  有时候模型的UV是翻转状态，调整这个参数能快速定位问题。

• 检查材质类型与光照配置
  要是你用了MeshBasicMaterial这类不支持光照和法线贴图的材质，那法线贴图等于白加，纹理自然会显得粗糙。记得换成MeshStandardMaterial或MeshPhongMaterial，同时场景里得配置合适的光源（比如DirectionalLight或PointLight），没有光照的话法线贴图的细节根本没法体现：

  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    normalMap: normalMap,
    roughness: 0.6, // 可以根据预期效果调整粗糙度
    metalness: 0.2
  });
  // 添加光源到场景
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(5, 10, 7.5);
  scene.add(light);
  

• 验证模型的UV坐标是否正常
  OBJLoader2的平滑处理不会破坏UV，但如果模型本身的UV展开有问题（比如重叠、拉伸），也会导致纹理显示粗糙。你可以在Blender里重新检查模型的UV，或者用Three.js的辅助工具可视化UV，确认UV布局是否合理。

• 对比预期效果的材质参数
  你提到预期效果是用不同纹理渲染的，不妨把预期效果里的材质参数（比如粗糙度、金属度、法线缩放）和当前的参数做对比，有时候哪怕是0.1的参数差异，都会让纹理表现天差地别。

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