三。GLTFLoader：未知扩展"KHR_materials_pbrSpecularGlossiness

Question

我们有一个导出。glb文件的应用程序，当我尝试使用GLTFLoader在3 .js中加载它们时，模型显示没有纹理，我得到这个警告THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"。模型和纹理在https://github.khronos.org/glTF-Sample-Viewer-Release/中加载得很好，所以文件是ok的。

扩展名似乎已从three.js (https://github.com/mrdoob/three.js/pull/24950)弃用，建议使用gltf-extensions或gltf转换。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);
}
});

I have try:

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

谢谢! !

Answer 1

新版本的three.js不包括spec/gloss PBR材料，而这个模型需要。所以这里没有快速的解决方案，模型必须转换为金属/粗糙的PBR材料。这是潜在的缓慢(纹理必须重写)，所以我做离线如果你可以。如果需要在运行时执行，则:

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);
// ...
});

离线命令行版本:

npm install --global @gltf-transform/cli
gltf-transform metalrough input.glb output.glb