Hello everyone!
I am trying to load a .glb file, but every time I try to run it, it throws this error:
Could you share the code used to load the model?
I agree this looks like a normal progress event and not an error – note that you’ll want separate callbacks for each.
Sorry for the late response. Here’s the code, it’s very simple:
const gltfLoader = new GLTFLoader();
gltfLoader.load('./public/test_object2.glb', (root) => {
scene.add(root.scene);
}, ( error ) => { console.log(error); });
Oh, and the ProgressEvent runs twice for some reason even though the glb file is only loaded once.
Ah the callbacks aren’t quite right here. The 2nd callback is an onProgress callback, you’ll need a 3rd to catch errors:
loader.load( 'model.glb', onLoad, onProgress, onError );
If you can use async/await, that may be easier to debug:
const { scene } = await loader.loadAsync( 'model.glb' );
I tried using a separate callback, but it just returned the exact same ProgressEvent object twice.
I think I’m doing something wrong for async/await, but I don’t know what.
When I do the following:
const { model } = await gltfLoader.loadAsync('./public/test_object2.glb');
scene.add(model);
The rest of the program runs and this error message is returned:
But when I use the scene attribute, the program doesn’t run and a different error message is returned.
const { model } = await gltfLoader.loadAsync('./public/test_object2.glb');
scene.add(model.scene);
This seems not to be something wrong with async/await, but how I’m using the three objects.
but it just returned the exact same ProgressEvent object twice.
Could you share the updated code? An onError callback will not receive ProgressEvents, so it sounds like you’re still using an onProgress callback.
The variable name cannot be changed from scene to model in this snippet, it is destructuring the gltf result object. Equivalent code would be:
const gltf = await gltfLoader.loadAsync('./public/test_object2.glb');
const model = gltf.scene;
Here is the updated code:
gltfLoader.load('./public/test_object2.glb', (root) => {
scene.add(root.scene);
}, ( onProgress ) => {
console.log(onProgress);
}, ( onError ) => {
console.log(onError);
});
Why can’t it be named model? The reason why I named it that is because I already have a variable named scene. Also, I’m not sure how you get from const model = gltf.scene; to a rendered model.
// Any of these will work:
const { scene } = gltf;
const scene = gltf.scene;
const model = gltf.scene;
// These do not work, because `gltf.model` does not exist:
const { model } = gltf;
const scene = gltf.model;
const model = gltf.model;
This is how object destructuring works in JS. Once you have a model, whatever you end up calling it, you can add it to your main scene as before.
I think I understand now. I have done what you said, but I have a new problem.
I’m probably not using the THREE classes right, here’s my code:
const gltf = gltfLoader.loadAsync( './public/test_object2.glb' );
const model = gltf.scene;
mscene.add( model );
I know that this is probably a really basic problem, but I’m quite new to this.
In this line you’re missing the “await” keyword. The loadAsync function returns a Promise, so you need to use await (or a callback) to get the result:
const gltf = await gltfLoader.loadAsync( './public/test_object2.glb' );
The Asynchronous Programming chapter of Eloquent JavaScript is a good explanation of this syntax.
Well, I’m not getting any errors, anymore, but the model is still not loading. I’m getting this issue, however:
./public/test_object2.glb
I’m really sorry that my code has so many problems. . .
I think you’ll have to share much more code — enough to reproduce the issue — or a demo to get useful help on this.
It turns out that I made a stupid mistake. I was loading the demo cube as well as the model, and the model was small enough that the cube completely covered it, so I didn’t see it. Really sorry for all the trouble.
Ok – yeah it’s something small like that more often than you’d expect 