0

The GLB file is OK, the URL is OK, so why can't I load the GLB? The same code runs on another computer.

        console.log("path to GLB is:", url);//looks good.. click to download glb
        try {
            let glb = useGLTF(url);
            // @ts-ignore
            console.log("Loaded GLB:", glb.scene);
        } catch(error){
            console.log("Nope I won't load it hihi!", error);
        }

Here the full code in the loop:

console.log(data);
data = JSON.parse(data);
data.forEach((p: any) => {
    console.log("path to GLB is:",p.meta_data[0].value);
    try {
        let glb = useGLTF(p.meta_data[0].value);
        // @ts-ignore
        console.log("Loaded GLB:", glb.scene);
        // @ts-ignore
        let obj = glb.scene.clone();
        let box = new Box3().setFromObject(obj);
        let size = new Vector3();
        box.getSize(size);
        var scaleVec = new Vector3(1, 1, 1).divide(size);
        let scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
        obj.scale.setScalar(scale * 1);
        let model = { scene: obj, name: p.name};
        console.log("MODEL", model);
        setMappedModels((mappedModels: any) => [
            ...mappedModels,
            model,
        ]);
    } catch (error) {
        console.log("Error on GLB Load:", error);
    }
});
Suisse
  • 3,467
  • 5
  • 36
  • 59
  • Maybe you shouldn't be telling the compiler to ignore the mistake it tried to tell you about? You have a _promise_. – jonrsharpe Dec 30 '22 at 10:15
  • the //@ts-ignore is only for the compiler to ignore the typing errors, but it still MUST run it as javascript code; it's just ignoring the compiler error, not the code itself. so I get this error: "Nope I won't load it hihi!", Promise {} PromiseState: fulfilled – Suisse Dec 30 '22 at 10:23
  • Yes, I'm well aware of that, but why are you ignoring the typing error then acting surprised when something goes wrong? – jonrsharpe Dec 30 '22 at 10:24
  • the ignore of the typing is here needed since the object glb does not have the attribute scene (in the typescript typings defined) but in three.js the object glb has the attribute scene on it. – Suisse Dec 30 '22 at 10:26
  • await useGLTF(url) ? – Ralle Mc Black Dec 30 '22 at 10:27
  • @Ralle I tried it with async await as well, it is still the same error. – Suisse Dec 30 '22 at 11:03
  • Take a look here : https://stackoverflow.com/questions/71589738/how-do-i-properly-use-drei-usegltf – Ralle Mc Black Dec 30 '22 at 11:08
  • this could be maybe the problem? the actual url looks like this: "http:\/\/localhost:10005\/uploads\/12\/soccer_ball.glb" - when you do console.log(url) it is getting encoded by the browser! maybe I need to encode it also for useGLTF? how to do that? – Suisse Dec 30 '22 at 11:11
  • used encodeURI().. still same error. – Suisse Dec 30 '22 at 11:19
  • I added the complete code, maybe it has something todo with setMappedModels() useState? – Suisse Dec 30 '22 at 12:35

0 Answers0