I can load model, but not the texture, when loading the file through the file input

Questions
1 
fileInput.addEventListener('change', function() {
  const uploadedFile = fileInput.files[0];

  if (uploadedFile) {
    const reader = new FileReader();

    reader.onload = function(event) {
        const result = event.target.result;

        const loader = new GLTFLoader();
        
        scene.remove.apply(scene, scene.children);

        loader.parse(result, '', function(gltf) {

          scene.add(gltf.scene);
          
          clearGUI();

          
        }, undefined, function(error) {
          console.error('Error loading model:', error);
        });
    };

    reader.readAsArrayBuffer(uploadedFile);
    
  } else {
    console.log('error');
  }
});

I am able to load the file like this, but I can’t load the texture since the GLB file doesn’t contain the texture. What can I do to load the texture?

2

@Wordprep you should try converting that model to a single GLB file and then load that file all by itself.

Here is one possible way of doing this:

  • put your files in a single folder (bin, gltf and texture)
  • you could use my GLTF Viewer and its Browse button to load all these files locally at once
  • once you see the model then select one of the Export options for GLB

Then you could use a code similar to this:

fileInput.addEventListener('change', function() {
  const uploadedFile = fileInput.files[0];

  if (uploadedFile) {
    const loader = new GLTFLoader();

    loader.load( URL.createObjectURL( uploadedFile ), function( gltf ) {
        URL.revokeObjectURL( uploadedFile );

        scene.remove.apply(scene, scene.children);

        scene.add(gltf.scene);

        clearGUI();

    }, undefined, function(error) {
          console.error('Error loading model:', error);
    });
    
  } else {
    console.log('error');
  }
});

Make sure to use that GLB model according to its original license.

3

I fixed it and it was because there was no light in the scene.