我们有一个导出 .glb 文件的应用程序,当我尝试使用以下命令将它们加载到 Three.js 中时GLTF加载器模型没有显示纹理,我收到此警告THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"
。模型和纹理加载良好https://github.khronos.org/glTF-Sample-Viewer-Release/所以文件没问题。
该扩展似乎已从 Three.js 中弃用(https://github.com/mrdoob/ Three.js/pull/24950),建议是使用 gltf-extensions 或 gltf.report 转换 .glb 文件并保存新的 .glb 文件 - 这在我的情况下不太实用,是否可以调整一些内容来显示带有纹理的模型三.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);
}
});
我努力了:
Thanks!!
较新版本的 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 进行运行时转换
If you need在运行时执行此操作,然后:
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);
// ...
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)