RangeError: attempting to construct out-of-bounds Float32Array on ArrayBuffer loadAccessor GLTFLoader.js:3064 THREE.GLTFLoader: Couldn't load texture textures/Material_baseColor.png

Questions
, ,
1

I’m trying to upload a GLTF object into Three.js and it will give me an error. I tried to follow this tutorial and he doesn’t get any errors while I have errors. I downloaded the model from sketchhfab and is this model. Trying to load the model with this code but I don’t know why I have errors.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const chestObject = new URL('../../assets/treasure_chest/scene.gltf', import.meta.url)


const gltfLoader = new GLTFLoader();
gltfLoader.load(chestObject.href, function(gltf){
  const model = gltf.scene;
  scene.add(model);
  model.position.set(-7, 4, 10)
}, undefined, function(error){
  console.error(error);
})
2

The model seems to work fine on three.js editor and https://gltf-viewer.donmccurdy.com/. You’ll have to check your network tab to see what requests for the texture have been made, and whether that’s correct relative to where you’ve put the texture. I’d suggest using .glb instead of .gltf, everything is embedded in one file and it’s much easier to manage. If you don’t have the .glb you can package it:

npm install --global @gltf-transform/cli

gltf-transform cp input.gltf output.glb
1 Like
3

Thanks! I will make sure to try it!