THREE.JS fbx is recognized as a localhost link

I’ve been trying to write this Three.js project for a while now, and I seem to be running into a problem. When I try to use an FBX path-name as my custom 3d model then it just returns a 404 error. This is obviously because it is attaching the pathname to localhost:8080 but I have no idea how to fix it and cannot even fathom where to start looking to even get that information.

Here is the necessary information to determine the solution to my stupid problem

script.js

// const loader = new OBJLoader()
// import { OBJLoader, MTLLoader } from 'https://cdn.skypack.dev/@hbis/three-obj-mtl-loader'
// import objMtlLoader from 'https://cdn.skypack.dev/obj-mtl-loader';
import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/FBXLoader.js'
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

const path = new THREE.Path();


const loader = new FBXLoader();
loader.setPath('./models/')
loader.load('guard.fbx', (fbx) => {
    // this._target = fbx
    // this._target.scale.setScalar(0.035);
    // this._params.scene.add(this._target);
    scene.add(fbx)
});

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff)

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


const sphere_geometry = new THREE.SphereGeometry(1, 32, 16);
const sphere_material = new THREE.MeshBasicMaterial({color: 0x000000})
const sphere = new THREE.Mesh(sphere_geometry, sphere_material);
scene.add(sphere);

document.addEventListener("onkeydown", function(e){
    switch(e.KeyCode){
        case 37:
            console.log("Left")
            break
        case 38:
            console.log("top")
            break
        case 39:
            console.log("right")
            break
        case 40:
            console.log("bottom")
            break
    }
})

// loader.load("/Users/dmitri/Desktop/flame/models/fresh_fire_01 (1).obj", function(object){
//     scene.add(object)
// })

var run = function() {
    requestAnimationFrame(run);
    renderer.render(scene, camera)
}
run()

index.html

<html>
    <head>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
        <script src="/script.js" type="module"></script>
    </body>
</html>

File Structure

modules

–campfire.fbx

–fresh_fire_0 (1).obj

–guard.fbx

public

–index.html

–script.js

app.js


Pls help meh!