I was using three.js with svelte for a project and when I try to load a 3d model the server returns with 404 not found. here is my code to load the file(Scene.js)

import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

loader.load('../model/room.gltf', function (gltf){
   scene.add(gltf.scene);
}, undefined, function(error){
   console.log("error: ",error);
});
let renderer;
camera.position.z = 5;


const resize = () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
};

export const createScene = (el) => {
    renderer = new THREE.WebGLRenderer({ antialias: true, canvas: el });
    resize();
}

window.addEventListener('resize', resize);

this is the svelte file which I include the scene in(Main.svelte)

<script>
import {onMount} from 'svelte';
import {createScene} from "../Scene/Scene"
let el;

onMount(() => {
    createScene(el);
})
</script>

<canvas bind:this={el}></canvas>
<style>

</style>

this is the project structure project structure

and this is the error (ignore the bundle CSS error), also the code works when I use three.js built-in geometry. console error

Thank you.