Assistance with GLTF loading using Nodejs React App

Questions
, ,
1

Hi THREE community,

It has been couple of days I’m trying to load a simple GLTF model using an nodejs react app but without success.

The error is I can’t get the file (404 error). I tried several approaches including the following:
in my server.js I used the following code to serve my static files:

app.use(’/api/v1/assets’, express.static(“public”))

in my scene.js I have included the following “standard” gltf loader code :slight_smile:

    var loader2 = new GLTFLoader();
    loader2.load('/assets/3dObjects/glb_testing.glb', function (gltf) {
        const blender_scene = gltf.scene;
        scene.add(blender_scene);

        gltf.scene.traverse(function (child) {

            objects.push(child);
            //console.log(child);

        });
    });

the hierarchy of my folders are:

image
image353×622 18 KB

image
image335×572 22.8 KB

here is the result

image
image945×712 39.4 KB

What am I missing

I know there are work-arounds using react-three-fiber, but If I can exhaust all my options before getting there it would be good.

Thanks a lot,

2

Unless something has changed you can’t because loaders rely on the dom API, fetch requests and url objects. You can mock it and patch loaders, that’s how r3f can use three’s loaders in react-native. All of this only applies if I’m reading your question right and you are trying to execute that code under node, which is unusual given that the server usually only hosts assets but they’re loaded on the client.

BTW, your code says assets/3dobjects/file.glb but your screenshot public/3dobjects/file.glb, if that were the client the correct path would be /3dobjects/file.glb there appears to be a folder called assets under /src but fetching from it cannot work because the bundler will ommit it, it creates a bundle, a single file, /assets will not exist in /dist and that’s what /public is for.