three.js加载Sketchfab GLTF模型提示自定义UV集不支持错误求助

错误原因 #

你遇到的报错是因为当前使用的Three.js版本中，GLTFLoader暂不支持金属度贴图（metalnessMap）、粗糙度贴图（roughnessMap）使用第二套UV坐标（UV Set 1），而Sketchfab自带的模型预览器做了对应兼容，所以站点内可以正常预览。

解决方案 #

你可以选择以下任意一种方式解决问题：

方式1：代码层直接修复（无需修改模型）

在GLTF模型加载完成的回调中遍历所有材质，手动将两类贴图的UV通道修改为默认的UV0即可，修改后的加载逻辑代码如下：

let loader = new THREE.GLTFLoader();
loader.load('./9/scene.gltf', function (gltf) {
    // 遍历模型所有节点修复UV通道不兼容问题
    gltf.scene.traverse((child) => {
        if (child.isMesh && child.material) {
            // 兼容单材质、多材质两种情况
            const materials = Array.isArray(child.material) ? child.material : [child.material]
            materials.forEach(mat => {
                if (mat.metalnessMap) mat.metalnessMap.channel = 0
                if (mat.roughnessMap) mat.roughnessMap.channel = 0
                mat.needsUpdate = true
            })
        }
    })
    car = gltf.scene.children[0];
    car.scale.set(10, 10, 10);
    scene.add(gltf.scene);
    animate();
});

方式2：升级Three.js到最新版本

当前新版本的Three.js已经支持GLTF多UV通道加载，直接升级你的Three.js以及配套的GLTFLoader、OrbitControls依赖版本，即可直接兼容该模型，无需修改额外代码。

方式3：修改模型源文件

使用Blender等3D编辑工具打开该GLTF模型，将金属度、粗糙度贴图绑定的UV通道修改为UV0，或者将UV1的坐标烘焙到UV0通道后重新导出GLTF即可。

额外优化建议 #

你的原代码中在加载回调里调用了一次renderer.render(scene, camera)，后续animate函数已经会循环执行渲染逻辑，该重复代码可以删除，不影响功能运行。

内容的提问来源于stack exchange，提问作者Tham Tantisunthorn