Attempting to construct out-of-bounds Float32Array on ArrayBuffer when loading

Questions
, , ,
1

Hi

This may be a noob question or already answered but i’m having a genuine problem with this

when i attempt to load a scene with the gltf-loader i get the resulting error

attempting to construct out-of-bounds Float32Array on ArrayBuffer

for some reason on my published website it works fine but on my dev server it wont load and its stopping me from continue development on my project

thank you for your time

3

The code in question

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
export default function Contentscene(scenepath) {

    let scene, animations;
    function init() {
        scene = new THREE.Scene();
        const loader = new GLTFLoader();
        loader.loadAsync(scenepath, function (gltf) {
        }).then((val) => {
            scene.add(val.scene)
           scene.reel = val.animations

            console.log(scene)
            if (val.scene) {
                for (let i = 0; i < val.scene.children.length; i++) {
                    if (val.scene.children[i].isCamera){
                        console.log(val.scene.children[i])
                        scene.camera = val.scene.children[i]
                    }
                }

            }

        })
       
        
    }
    function animate() {
  
        requestAnimationFrame(animate);
    }
    animate()
    init()
    return scene


}

and for the file that accesses it

const backgroundref = ref(
      storage,
      "Content/" + id + "/background.gltf"
    );  

    
    getDownloadURL(backgroundref).then((url) => {
      scene = new Contentscene(url);
    }).catch((error) => {
      scene = new Contenterrorscene(renderer);
    });```
4

The error message
“attempting to construct out-of-bounds Float32Array on ArrayBuffer”
typically indicates that the GLTFLoader is trying to create a typed array from a binary buffer that doesn’t have enough data. In many cases this happens when the file being loaded is incomplete or not served as expected.

Since your published website works but your development server does not, check the following:

  1. File Integrity and Delivery:
    – Verify that the glTF file (or its associated .bin file if using external binary data) is being served correctly on your dev server. Open the network tab in your browser’s developer tools and compare the file size and content-type with the production version.
    – Sometimes the server may return an HTML error page (for example, a 404 page) with a status code 200; this page’s content won’t match the expected binary format, causing the loader to attempt reading an incomplete ArrayBuffer.
  2. MIME Type and Encoding:
    – Ensure that your development server is configured to serve the glTF file (and any related binary files) with the proper MIME type (commonly model/gltf+json for .gltf files or application/octet-stream for binary files).
    – Incorrect headers or content encoding can result in corrupted or truncated data.
  3. Server Configuration Differences:
    – Check if your dev server has any middleware (such as compression, caching, or rewriting rules) that might inadvertently alter or truncate the file. – If you are using Firebase storage (as indicated by your use of getDownloadURL), verify that security rules or environment differences are not causing the file to be delivered differently between environments.
  4. Optional Loader Extensions:
    – Although your code imports DRACOLoader, if your glTF file uses Draco compression, ensure that the DRACOLoader’s decoder path is set correctly. An improperly configured decoder can also lead to unexpected parsing issues.

By confirming that the file is fully and correctly delivered on your dev server (and not replaced by an error page or truncated data), the loader should receive the complete ArrayBuffer. This will prevent the “out-of-bounds” error when constructing the Float32Array.