GLB Model not displaying on Three JS webpage

The scene, the mesh is all showing up on the website. I've moved the glb literally next to the main.ts file so there's no directory issues. But nothing shows up.

The filename is coffeeshop.glb. This is my main.ts file:

const scene = new THREE.Scene();
// scene.background = new THREE.Color(0xffc0cb)
scene.background = new THREE.Color(0x000000)

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 1, 5)

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

const container = document.getElementById("container3D");
if (!container) {
    console.error("Container element 'container3D' not found!");
} else {
    container.appendChild(renderer.domElement);
}

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const glbLoader = new GLTFLoader();

glbLoader.load('coffeeshop.glb', (gltf) => {
    const coffee = gltf.scene;
    coffee.traverse((child) => {
        if ((child as THREE.Mesh).isMesh) {
            (child as THREE.Mesh).geometry.center();
        }
    });
    scene.add(coffee)

})

function animate() {
    requestAnimationFrame(animate);
    controls.update(); // required if controls.enableDamping = true
    renderer.render(scene, camera);
}

animate();

The problem is not that the path is wrong, but the fact you put it next to your main.ts. ThreeJS treats the binary .glb file as a static asset, this means they have to be in the /public/ directory to be able to work in your browser. So the solution is to put it in the public folder of your project structure.