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: `

Load Mesh

`

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> <App /> </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?