THREE.GLTFLoader：未知扩展“KHR_materials_pbrSpecularGlossiness

Question

我们有一个导出 .glb 文件的应用程序，当我尝试使用GLTFLoader将它们加载到 Three.js 中时，模型没有显示纹理，我收到此警告THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"。模型和纹理在https://github.khronos.org/glTF-Sample-Viewer-Release/中加载良好，因此文件没问题。

该扩展似乎已从 Three.js （https://github.com/mrdoob/third.js/pull/24950）中弃用，建议是使用 gltf-extensions 或 gltf.report 转换 .glb 文件并保存新的 .glb 文件 - 这在我的情况下不太实用，是否可以调整一些内容以在 Three.js 中显示带有纹理的模型？

代码足够标准：

const loader = new GLTFLoader();

loader.load(uri, function loaded(gltf) {
    const model = gltf.scene;
 
    const newMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
    model.traverse((o) => {
        if (o.isMesh) {
            // not sure if it's relevant but if I don't .clone()
            // it removes the child and traverse crashes
            let mesh = o.clone();

            // const nextMaterial = new THREE.MeshPhysicalMaterial();
            // THREE.MeshStandardMaterial.prototype.copy.call(mesh.material, nextMaterial);
            // mesh.material = nextMaterial;

            // mesh.material.metalness = 0;

            scene.add(mesh);
        }
    });

我努力了：

• 模型加载后更换材料
• 点照明
• 将金属度设置为 0

谢谢！！

Answer 1

较新版本的 Three.js 不包含此模型所需的规格/光泽 PBR 材质。因此这里没有快速的解决方法，模型必须转换为金属/粗糙 PBR 材质。这可能会很慢（必须重写纹理），所以如果可以的话我会离线进行。

选项 1：UI 转换

将模型加载到https://gltf.report/，接受转换材质的提示，然后将结果导出到新文件。

选项2：离线命令行转换

npm install --global @gltf-transform/cli

gltf-transform metalrough input.glb output.glb

选项 3：使用 JavaScript 进行运行时转换

如果您需要在运行时执行此操作，则：

import { WebIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';
import { metalRough } from '@gltf-transform/functions';

// Load model in glTF Transform.
const io = new WebIO().registerExtensions(KHRONOS_EXTENSIONS);
const document = await io.read('path/to/model.glb');

// Convert materials.
await document.transform(metalRough());

// Write back to GLB.
const glb = await io.writeBinary(document);

// Load model in three.js.
const loader = new GLTFLoader();
loader.parse(glb.buffer, '', (gltf) => {
  scene.add(gltf.scene);
  // ...
});