I use GLTFLoader to import my existing 3D model into the scene. It works fine as I am able to view my model with the texture and animations and all. Next, without modifying anything, I use GLTFExporter to export to both .glb and .gltf by changing the binary option to true and false respectively.
Next, I try to load the exported file with `GLTFLoader' again but and error pop up.
Here is my code to load the file
const { name } = file;
const isFBX = name.match(/\.(fbx)$/);
const isGLB = name.match(/\.(gltf|glb)$/);
const isEitherFBXorGLB = isFBX || isGLB;
if (isEitherFBXorGLB) {
const path = URL.createObjectURL(file);
const loader = isFBX ? new FBXLoader() : new GLTFLoader();
loader.load(
path,
(gltf) => {
console.log(gltf);
if (isFBX) setModel(gltf as Group);
if (isGLB) setModel((gltf as GLTF).scene);
if (gltf.animations) setAnimationClips(gltf.animations);
},
(event) => setModelLoaded((event.loaded / event.total) * 100),
(error) => {
console.error(error);
},
);
}
Here is my code to export
const exporter = new GLTFExporter();
const options = {
binary: false,
animations: animationClips,
};
console.log(options);
(exporter as any).parse(
model,
(result: any) => {
console.log(typeof result, result);
if (result instanceof ArrayBuffer) {
saveArrayBuffer(result, 'newmodel.glb');
} else {
const output = JSON.stringify(result, null, 2);
saveString(output, 'newmodel.gltf');
}
},
(error: any) => console.log(error),
options,
);
const save = (blob: Blob, filename: string) => {
const link = document.createElement('a');
link.style.display = 'none';
document.body.appendChild(link); // Firefox workaround, see #6594
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
};
const saveString = (text: string, filename: string) => {
save(new Blob([text], { type: 'text/plain' }), filename);
};
const saveArrayBuffer = (buffer: any, filename: string) => {
save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
};
I have no clue why it doesn't work.