Three.js加载GLB模型无纹理，提示KHR_materials_pbrSpecularGlossiness未知扩展

问题核心是Three.js默认已移除对KHR_materials_pbrSpecularGlossiness扩展的支持，但可以通过引入官方提供的扩展加载器解决，无需转换模型文件。

解决方案步骤 #

1. 引入扩展加载器：从Three.js的examples模块中导入GLTFSpecularGlossiness，它负责解析该扩展材质并转换为Three.js兼容格式。
2. 注册扩展到GLTFLoader：初始化加载器时注册该扩展，让加载器能识别并处理对应的材质数据。
3. 修正模型加载逻辑：原代码中克隆Mesh的操作会导致纹理引用丢失，直接添加整个模型场景即可。

修改后的完整代码 #

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { GLTFSpecularGlossiness } from 'three/addons/loaders/GLTFSpecularGlossiness.js';

const loader = new GLTFLoader();
// 注册SpecularGlossiness扩展解析器
loader.register( ( parser ) => new GLTFSpecularGlossiness( parser ) );

loader.load(uri, function loaded(gltf) {
    const model = gltf.scene;
    
    // 直接将整个模型添加到场景
    scene.add(model);

    // 按需调整材质参数（可选）
    model.traverse((o) => {
        if (o.isMesh) {
            // 扩展会自动将SpecularGlossiness材质转为MeshStandardMaterial
            o.material.metalness = 0;
            o.material.needsUpdate = true;
        }
    });
}, undefined, function(error) {
    console.error('模型加载失败:', error);
});

关键说明 #

• GLTFSpecularGlossiness会自动将扩展材质转换为Three.js原生的MeshStandardMaterial，完整保留纹理、高光、光泽度等参数，无需手动替换材质。
• 原代码中克隆Mesh的操作是多余的，且会破坏材质与纹理的关联，直接添加整个模型场景即可正常渲染。
• 确保引入的扩展文件与你的Three.js版本完全一致，避免版本不兼容导致的异常。

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