GLTFExporter using aframe scene

Questions
, ,
1

Im trying to use the GLTFExporter to export an a-frame scene the code is the same as in the thee.js examples and the only change is the scene, i manage do download the glb file but when i try and open it on a 3D viewer i get this error “Unable to load from file:scene.glb: RangeError: Invalid typed array length: 20” does anyone know what im doing wrong here?

   <script type="module">
      import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

      var btn = document.createElement('button');
      document.body.appendChild(btn);
      btn.textContent = 'Download .glb';
      btn.onclick = download;

      function download() {
        let scene = document.getElementById("scene").object3D;
        console.log(scene);
        const exporter = new GLTFExporter();
        exporter.parse(
          scene,
          function (result) {
            saveArrayBuffer(result, 'scene.glb');
          },
          { binary: true }
        );
      }

      function saveArrayBuffer(buffer, filename) {
        save(new Blob([buffer], { type: 'application/octet-stream' }), filename);
      }

      const link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link); // Firefox workaround, see #6594

      function save(blob, filename) {
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();

        // URL.revokeObjectURL( url ); breaks Firefox...
      }
  </script>

  <a-scene id="scene" embedded renderer="logarithmicDepthBuffer: true; antialias: true;" vr-mode-ui="enabled: false" gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
2

I hit this yesterday. Chatgpt tells you the wrong Params for exporter.parse

The 3rd Param is the error callback and the 4th Param should be the options.

Yr code is passing options as the error handler so you’re getting a text gltf back not a binary (.glb)

3

Thanks that was it :grinning:

1 Like