Problem with adding 3D model into modal

[pearl heron]

Hello, I'm making an interactive globe, but there's a bit of a problem when I try loading 3D models into modals. It loads back to my html file as shown in the screenshot. I'm wondering where I went wrong.
// MODAL // var modal = document.getElementById("myModal"); var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // BUTTON ARRAY // const globeButtons = []; const buttonData = [ { lat: 30, lon: 60, img: '/earth/pic.png', model: '/spag.glb' }, ]; buttonData.forEach(data => { const texture = new THREE.TextureLoader().load(data.img); const sprite = new THREE.Sprite( new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: true }) ); sprite.scale.set(0.3, 0.3, 1); sprite.position.copy(latLonToVector3(data.lat, data.lon, 2.05)); sprite.userData.model = data.model; earthGroup.add(sprite); globeButtons.push(sprite); });

`// RAYCASTER //
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener('click', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(globeButtons);
if (intersects.length > 0) {
const clickedSprite = intersects[0].object;
modal.style.display = "block";

const modelPath = clickedSprite.userData.model;
  if (modelPath) {
    setTimeout(() => {
        initModal3D(modelPath);
    }, 50);
}

}
});
// 3D MODELS //
let modalScene, modalCamera, modalRenderer;
function initModal3D(modelPath) {
const container = document.getElementById('modelContainer');
if (modalRenderer) {
container.removeChild(modalRenderer.domElement);
modalRenderer.dispose?.();
}
// Scene
modalScene = new THREE.Scene();
// Camera
modalCamera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
modalCamera.position.set(0, 1, 3);
// Renderer
modalRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
modalRenderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(modalRenderer.domElement);
// Light
const light = new THREE.DirectionalLight(0xffffff, 3);
light.position.set(5, 5, 5);
modalScene.add(light);
modalScene.add(new THREE.AmbientLight(0xffffff,1));
// Load model
const loader = new GLTFLoader();
loader.load(modelPath, (gltf) => {
console.log(gltf.scene);
modalScene.add(gltf.scene);
gltf.scene.position.set(0, 2, 5);
gltf.scene.scale.set(1,1,1);
});
const animate = () => {
requestAnimationFrame(animate);
modalRenderer.render(modalScene, modalCamera);
};
animate();
}`

[twilit ridge]

it looks like it is returning a generic 404 page html.
your glb is on the server? does the server allow for the correct mimetype?

[hoary spoke]

What is your HTTP status code on that response? Looks like classic 404 problem

If you have a baseURL in your vite app, you need to fetch the model with the baseURL included in the path

[pearl heron]

Im pretty new to threejs, is there a way to check?

[pearl heron]

200 for HTTP status code, base url is http://localhost:5174/ I believe? how can I fetch it?

[twilit ridge]

the problem is not threejs related. the server is not serving up the glb file. since its giving you a 200 response, your server settings is either 1) redirecting 404s to a 200 error page or 2) mimetypes are not configured, meaning it can find the file but has no idea how to serve it, resulting again in an error
try navigating to the glb file directly without threejs. eg localhost:5174/spag.glb (if that is where the glb is supposed to be). see what it serves up

[pearl heron]

It loads my full globe model just like localhost:5174

[pearl heron]

should I change the 3D model file's type?

[tulip rune]

Double check if path is correct first

You can look at network tab where this file is leading, tries to be loaded from

Are you using any frameworks? Client \ server side?

[pearl heron]

I'm pretty sure the path is correct
Im not using any framework, client side

[half beacon]

How are you serving?

[pearl heron]

no progress, I'll try asking prof next week

[hoary spoke]

This is Vite application (correct me if I’m wrong) based on the 404 page screenshot above and the port number

I’ve never had to configure mimetype or server settings for GLB imports in Vite

My guess it, your script being in an MD file is causing the paths to be imported incorrectly

Can you please post the model path here? As well as the URL it’s trying to fetch from in the network tab?

[pearl heron]

const buttonData = [
{ lat: 30, lon: 60, img: '/earth/pic.png', model: '/spag.glb' },
];

sorry for the late reply, I greatly appreciate your help thus far!

the /earth/pic.png in static shows up fine, Ive even tried to put the glb file in static but no use

[hoary spoke]

What url is it trying to fetch in the network tab?

[pearl heron]

I don't know what I did but now the model works?

I tried putting it in static folder again instead of public