Loading GLTF with armature fails (Float32Array on ArrayBuffer error)

[Junisek]

Hello, I’m trying to import a skinned mesh to my project. The project was set up and was working fine with an old mesh but once I created a new one it stopped working - but, only when I include armature.

I’m sending the mesh from a php server over REST API base64 encoded.

$uri = base64_encode(file_get_contents($gltf));

In JS, I’m then decoding it and parsing. As I said, it works totally fine with the same mesh but without armature.

const mesh = atob(encodedData);

const loader = new THREE.GLTFLoader();

loader.parse(
      mesh,
      "/models/",
      (gltf) => {
        console.log("loaded", gltf);
      },
      (error) => {
        console.log("An error happened", error);
      }
    );

Then I get the

RangeError: attempting to construct out-of-bounds Float32Array on ArrayBuffer.

I consulted with ChatGPT and it suggested this

const bufferLength = mesh.length;
const arrayBuffer = new ArrayBuffer(bufferLength);
const uintArray = new Uint8Array(arrayBuffer);

for (let i = 0; i < bufferLength; i++) {
    uintArray[i] = mesh.charCodeAt(i);
}

loader.parse(
      arrayBuffer,
      "/models/",
      (gltf) => {
        console.log("loaded", gltf);
      },
      (error) => {
        console.log("An error happened", error);
      }
    );

Which gives me the same error. I also tried to stringify the decoded data as I noticed the data represent differently in the console (black - mesh with no armature, pink - mesh with armature).

When I stringify (with or without the ArrayBuffer conversions), I get this error:

Error: THREE.GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported.

But the mesh is GLTF.2. It loads fine using Don Mc Curdys GLTF viewer. This is the report

To clarify, I’m using Aframe on version 1.3.0, when I tried the latest version, it fails as well but silently so I’m using the older version for sake of debugging.

Thank you for your suggestions, it’s driving me crazy!