Skip to content

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

@fotsing365

Description

@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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions