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

Viewed 20

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.

0 Answers
Related