GLTF Loader Issue: Invalid typed array length 4

Questions
1

Hey guys,

I’ve been building a front-end with vue which pings an API acting as a model server.

This has been working fine up until I added authorization to the API and for whatever reason i’m getting the error below when I try to load a model based of the api url.

RangeError: Invalid typed array length: 4
at new Uint8Array ()
at GLTFLoader.parse (GLTFLoader.js?34ad:187)
at Object.eval [as onLoad] (GLTFLoader.js?34ad:144)
at XMLHttpRequest.eval (three.module.js?5a89:35704)

I have pinged the api using the same url and authorization token and the model returns fine. I also checked the model at glTF Validator and it comes up as valid. The model is attached.

On the front end, this is the code i’m using to load the model:

image
image722×385 13 KB

Can’t figure out why i’m getting the error on the loader, any help appreciated.

Model download: response2.glb (148.6 KB)

2

I"m guessing it is because i need to add in authorization token to url get request used by loader. Does anyone know of way to add header to gltf loader?

3

For now I think you would have to fetch the .glb first — either using FileLoader or with your JS HTTP request method of choice — and then pass the ArrayBuffer into GLTFLoader’s loader.parse(...) method.

An unfinished proposal for a one-step method is in https://github.com/mrdoob/three.js/pull/18662.

4

Thanks for the suggestion don.

I tried setting up http request and passing response to the parse method as suggestion. I get the error “Unexpected token g in JSON at position 0” when I try to do so which I’ve had an issue with before. Seems to happen when it trys to load from gltf string rather than glb directly from url.

Good to know headers will be included with r115, hopefully that will resolve a few issues.

thanks again.

5

This data shouldn’t be JSON, so something sounds wrong here… for example try:

fetch(url, {credentials: 'include', headers: {...}})
  .then((response) => response.arrayBuffer())
  .then((arrayBuffer) => {
    loader.parse(arrayBuffer, '', (gltf) => { ... });
  });

Good to know headers will be included with r115, hopefully that will resolve a few issues.

Hopefully it makes it into r115, but it could be a few releases out too.

6

I’ve tried what you suggested but getting arrayBuffer is not a method based on:

image
image700×393 14.2 KB

here’s the response data i’m getting too:

image
image1757×369 27.1 KB

As i said in original post. If I remove authorisation and add url directly into GLFTloader.load, it works just fine. The api is return a .glb.

thanks again mate

7

Thanks again for your help mate. The issue was with getting arraybuffer from response data while using axios… Seems i’m not the only one with the issue https://github.com/axios/axios/issues/1392

I switched to fetch api and now works a charm :+1:

1 Like