Three.js中修改GLTF对象材质显示单色异常问题咨询

核心问题排查与修复步骤 #

1. 修复纹理加载的异步问题 #

当前代码中textureLoader.load是异步操作，直接赋值材质时纹理可能还未加载完成，导致显示默认颜色。修改为在纹理加载完成后再设置材质：

function applyMaterial() {
    if (!selectedObject) return;

    const materialName = document.getElementById('materialList').value;
    textureLoader.load(materialName, (materialTexture) => {
        // 配置纹理属性
        materialTexture.wrapS = THREE.RepeatWrapping;
        materialTexture.wrapT = THREE.RepeatWrapping;
        materialTexture.minFilter = THREE.LinearFilter;
        materialTexture.magFilter = THREE.LinearFilter;

        const newMaterial = new THREE.MeshStandardMaterial({ map: materialTexture });

        selectedObject.traverse((child) => {
            if (child.isMesh) {
                child.material = newMaterial;
                child.material.needsUpdate = true;
            }
        });
    });
}

2. 确保场景存在有效光源 #

MeshStandardMaterial依赖光照才能显示纹理细节，如果场景中没有光源，会呈现单一暗色调。添加基础光源示例：

// 在场景初始化时添加
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);

3. 检查GLTF模型的UV映射 #

• 用Blender等建模工具打开原GLTF文件，确认模型已正确展开UV，且导出时勾选了UV映射选项。
• 如果模型无UV数据，纹理无法正确映射，会显示单一颜色，需重新编辑模型并导出。

4. 验证纹理路径与加载状态 #

• 打开浏览器控制台，检查是否有纹理文件的404错误，确认./mat/路径下的图片文件存在且名称正确。
• 可在textureLoader.load的错误回调中排查加载问题：

textureLoader.load(materialName, 
    (texture) => { /* 成功回调 */ },
    () => {}, // 进度回调
    (error) => { console.error('纹理加载失败:', error); }
);

5. 强制更新几何体与材质 #

遍历子对象时，可额外触发UV和几何体的更新，确保材质生效：

selectedObject.traverse((child) => {
    if (child.isMesh) {
        child.material = newMaterial;
        if (child.geometry.attributes.uv) {
            child.geometry.attributes.uv.needsUpdate = true;
        }
        child.geometry.computeBoundingBox();
        child.material.needsUpdate = true;
    }
});

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