404 error when try import 3D model

Hello,

I am actually learning to use three js. I have started by following this video to setup my project.

Everything is working and I can watch my project by using “npm run dev”.

Now, I am trying to import a custom 3D model generate on blender. I am using this code :

const gltfLoader = new GLTFLoader();

gltfLoader.load("./untitled.glb", (gltf) => {
scene.add(gltf.scene);
}, undefined, function ( error ) {
    console.error( error );
} );

Now, when I start the server, I got an 404 error
image

After lot of search and try, I didn’t find a solution for my case.

That’s my hierarchy :
image

I tried to place my 3D model in different where of my project and change path but didn’t work.

Did you got an idea to resolve this problem ?

Thanks

try to make code exmple here , use codepen/codesandbox … put your code there then let us see so we can help you

There is a link in codepen of all my code : https://codepen.io/OctoChat/pen/MWBjXvr

I don’t know if it is a problem with three js or if it is the server

just a wrong path. it’s telling you that “./untitled.glb” leads no where. that’s most likely because assets have to be in /public or what like like /static in your case. they can’t be inside /src because that folder does not exist, it is virtual. they can’t also be in the root folder. the bundlers job is to copy that into /dist, which is your actual app. if your glb is nowhere to be found in /dist that’s bad.

given:

/static
  /models
    untitled.glb

the correct url is: "./models/untitled.glb"

ps. webpack is a very complex thing. at this point i don’t know a single person who’d still use it raw, it is mostly being used by other tools and CLI’s. nobody’s got time to sift through config files and all the nonsense that was needed years ago. bundling nowadays is a no friction task.

use vite

the simplest bundler there is: type npm create vite in your dev main folder, go through the steps, npm install three and you’re done. the asset folder then is called “public”, it creates that for you.

Thank’s, now that’s working !

I’ll check about vite :slight_smile:

Hi, I’m having same issue eventhough the path is correct and the model is in static folder, can you help me with it?

const scene = new THREE.Scene()

// Draco loader
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')

// GLTF loader
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)

/**
 * Model
 */
 gltfLoader.load(
    'static/models/harmless_communication.glb',
    (gltf) => {
        scene.add(gltf.scene);
    }
)