react-three-fiber（three.js）游艇模型纹理映射异常问题求助

问题描述 #

尝试将指定纹理应用到游艇模型的某个部分：
[纹理图片]

该纹理在Blender中显示正常：
[Blender效果图]

但在浏览器中显示效果异常：
[浏览器异常图1]
[浏览器异常图2]

使用的Three.js代码如下：

import { TextureLoader, MeshBasicMaterial } from 'three'
import leatherImage from '../../../assets/fabric_leather_02_diff_1k.jpg'

const initialTexture = new TextureLoader().load(leatherImage)
export const initialMaterial5 = new MeshBasicMaterial({ map: initialTexture })

//...

;(model.children[5] as Mesh).material = initialMaterial5

UV向量看似正常，且其他纹理可正常工作，寻求解决思路。

解决思路 #

• 检查纹理加载时机：TextureLoader.load()是异步操作，直接赋值可能导致材质初始化时纹理未加载完成。可通过加载回调确保纹理就绪后再更新材质：

  const initialMaterial5 = new MeshBasicMaterial()
  new TextureLoader().load(leatherImage, (texture) => {
    initialMaterial5.map = texture
    initialMaterial5.needsUpdate = true
  })
  

• 确认纹理UV映射设置：Three.js默认UV范围为[0,1]，若模型导出时UV存在缩放或偏移问题，可手动配置纹理的包裹模式和重复参数：

  initialTexture.wrapS = THREE.RepeatWrapping
  initialTexture.wrapT = THREE.RepeatWrapping
  initialTexture.repeat.set(1, 1) // 根据实际视觉效果调整重复次数
  

• 对齐材质类型：当前使用MeshBasicMaterial（无光照响应），若游艇其他部分使用的是受光照影响的材质（如MeshStandardMaterial），材质类型差异会导致视觉表现不一致。建议替换为和其他纹理一致的材质类型测试。
• 验证模型UV数据：打印模型的UV属性确认数据是否有效：

  console.log((model.children[5] as Mesh).geometry.attributes.uv)
  

  若UV数据缺失或异常，需重新导出模型并确保导出时勾选UV选项。
• 检查纹理规格：Three.js对纹理尺寸要求为2的幂次方（如512x512、1024x1024），非标准尺寸可能导致渲染异常，可将纹理调整为符合要求的尺寸后测试。

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