RangeError: Maximum call stack size exceeded when exporting to gilt file using GLTFExporter

• @react-three/drei version: ^10.0.4
• @react-three/fiber version: ^9.1.0
• three-stdlib version: 2.35.14

Problem description:

I get an error when exporting to a gltf file using the following function.

• Components used: GLTFExporter
• Functions used: parse

Relevant code:

sample:
https://github.com/activeguild/gltfexporter-bug

npm install

npm run dev`

• Download GLTF button clicked

Suggested solution:

before

async function readAsDataURL(blob) {
  const buffer = await blob.arrayBuffer();
  const data = btoa(String.fromCharCode(...new Uint8Array(buffer)));
  return `data:${blob.type || ""};base64,${data}`;
}

after

async function readAsDataURL(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

Start with the linked reproducer, run npm install and npm run dev, then click the Download GLTF button to reproduce the RangeError. Trace GLTFExporter.parse through readAsDataURL and compare the provided implementation with the FileReader version. Done means exporting no longer exceeds the call stack and produces a GLTF file.