ThreeJS – Cannot load GLB/GLTF file that I exported using GLTFExporter

Issue

This Content is from Stack Overflow. Question asked by Adam Ismail

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.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?