blob:http://localhost:3000/scene.bin:1 Failed to load resource: net::ERR_FILE_NOT_FOUND`

[fotsing365]

Hello,
I would like to add a "Load Mesh" button allowing, once the application is launched, to dynamically load mesh files. I made the necessary modifications in the index.html, App.jsx and main.jsx files as follow:
index.html:
`

<title>Vite App</title> <script src="https://cdn.tailwindcss.com"></script> <style> #loadButton { position: absolute; bottom: 10px; left: 10px; background-color: blue; color: white; padding: 10px 20px; cursor: pointer; border: none; border-radius: 5px; } </style>

Load Mesh <script type="module" src="/src/main.jsx"></script>

`

App.jsx:
`import React, { useEffect, useState } from 'react';
import * as THREE from 'three-full';
import SceneInit from './lib/SceneInit';

function App() {
const [loadedModel, setLoadedModel] = useState(null);

useEffect(() => {
const test = new SceneInit('myThreeJsCanvas');
test.initialize();
test.animate();

const gltfLoader = new THREE.GLTFLoader(); 
const textureLoader = new THREE.TextureLoader();

const loadMesh = () => {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.gltf'; 
  fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    if (file) {
      const gltfURL = URL.createObjectURL(file);

      const response = await fetch(gltfURL);
      const gltfData = await response.blob();
      const gltfURLDirect = URL.createObjectURL(gltfData);

      gltfLoader.load(
        gltfURLDirect,
        (gltfScene) => {
          setLoadedModel(gltfScene.scene);
          gltfScene.scene.rotation.y = Math.PI / 8;
          gltfScene.scene.position.y = 3;
          gltfScene.scene.scale.set(10, 10, 10);
          test.scene.add(gltfScene.scene);
        },
        undefined,
        (error) => {
          console.error('Erreur de chargement GLTF :', error);
        }
      );
    }
  });
  fileInput.click();
};

document.getElementById('loadButton').addEventListener('click', loadMesh);

textureLoader.load(
  'textures/default_baseColor.png',
  (texture) => {
  },
  undefined,
  (error) => {
    console.error('Erreur de chargement de texture :', error);
  }
);

}, []);

return (

);
}

export default App;
`

main.jsx:
`import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);

document.getElementById('loadButton').addEventListener('click', () => {

});`

But nothing works once you click on the .gltf file chosen by the user. I have the following error in console:
blob:http://localhost:3000/textures/default_baseColor.png:1 Failed to load resource: net::ERR_FILE_NOT_FOUND App.jsx:40 Erreur de chargement GLTF : Error: GLTFLoader: Failed to load buffer "scene.bin". at Object.onError (GLTFLoader.js:1657:13) at XMLHttpRequest.<anonymous> (FileLoader.js:239:39) (anonyme) @ App.jsx:40 blob:http://localhost:3000/scene.bin:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

I'm new with three js. Please what could be the problem?