Noob - Basic model import 404'ing

Questions
1

So i’m just starting my Three js journey and experimenting with the docs and i’ve hit a bit of a block.
I found a free gltf model file, added it to my project in a models folder. Followed the guide on loading a model from the docs and in the console, i’m getting a 404 file not found. I thought initially it was to do with it being up a folder but even adding that to the path doesn’t fix it. Here’s some screenshots for you. Any help would be great, i’m a noob so i know it’s something obvious.

image
image2786×1454 458 KB

image
image2981×1662 356 KB

2

Maybe the BeginnerExample (step 3) from the Collection of examples from discourse.threejs.org will help you.

See * discourse.threejs.hofk.de

3

Sorry, isn’t this kind of what i’m already doing here?

image
image1620×448 55.8 KB

i’m not too concerned about parameters for it displaying yet, just the loading as i’m 404’ing.

Is it because i’m not running it in a local web server this is happening?
If so i tried doing that but the three js canvas part wasn’t running when i went to my page, it was just displaying the html page.

Thanks for your help,
Kev

4

fyi - here’s what i see on the five server

image
image2993×1674 480 KB

5

Only from the pictures one can not localize the error. :thinking:

However, I suspect that either your local server is not configured properly or the directory structure does not match.

Try the following.

Download the file 2020.zip from * discourse.threejs.hofk.de.
On this page are links to help.

Follow the instructions in the file GetSources

and note Local use of the examples

The example /2020/LoadGLTF/LoadGLTF.html should then work for you.

This example does not use modules yet.

Then try to use the example MovementOnCurve from 2021. It uses the module version.

Read Module usage

Good luck. :slightly_smiling_face:

1 Like
6

you’re using relative paths, that’s your issue. the 404 is telling you that the browser cannot locate the file. you can’t just fetch(‘models/something.glb’) because that’s not a valid path, it doesn’t exist in the dist folder which is where the bundler will output (and execute) everything. it will only move files there if you indicate it:

either by putting models into /public, because the bundler will then copy it to /dist to make it available

or by importing assets, and yes, including glbs, which are just turned into a hashed-url:

import url from '/models/something.glb'

rule of thumb: static files go into public. dynamics and assets that you want to have full cache control over get imported.