MtlLoader not working with files loaded by users

Questions
, , , , , ,
1

Hi there

I’m trying to use an mtl loader so users can load their own files (obj mtl and texture files)
since i can’t use setResourcePath or set path on the mtlLoader to their directories I’m trying to modify the loading manager with setUrlModifier to createObjectUrls from files.

it will work if i just try to load an obj
when I try to load an obj and mtl or an obj and mtl and the jpeg I get:

    mainmodules.js:401 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
        at eval (mainmodules.js:401)
        at LoadingManager.resolveURL (three.module.js:36377)
        at ImageLoader.load (three.module.js:37089)
        at TextureLoader.load (three.module.js:37236)
        at MTLLoader.MaterialCreator.loadTexture (MTLLoader.js:528)
        at setMapForType (MTLLoader.js:331)
        at MTLLoader.MaterialCreator.createMaterial_ (MTLLoader.js:380)
        at MTLLoader.MaterialCreator.create (MTLLoader.js:293)
        at MTLLoader.MaterialCreator.preload (MTLLoader.js:261)
        at eval (mainmodules.js:438)

Here is the loading code:

function loadModel(e){

    var mesh = undefined;
    const files = document.getElementById("uploadedModel").files;
 
    var extension = undefined;
    var gltf = undefined;
    var obj = undefined;
    var mtl = undefined;
    var formatAndTextureFiles = {};
 

    for(const file of files) {

        extension = file.name.split('.')[1];
        
        if (extension === "obj"){
            obj = file.name;
            formatAndTextureFiles[file.name] = file;
            
        }else if (extension === "mtl"){
            mtl = file.name;
            formatAndTextureFiles[file.name] = file;
          
        }else if (extension === "jpg" || extension === "jpeg" || extension === "png" || extension === "bmp" ){
            formatAndTextureFiles[file.name] = file;
        }
    } 

    var manager = new THREE.LoadingManager();
    var objectURLs = [];

    manager.setURLModifier( ( url ) => {

        url = window.URL.createObjectURL( formatAndTextureFiles[url]);
        objectURLs.push( url );
        return url; 

    } );
    
    if (obj !== undefined && mtl !== undefined){
        var mtlLoader = new MTLLoader(manager);
        var objLoader = new OBJLoader(manager);

        mtlLoader.load( mtl, function (materials) {
            materials.preload();
            objLoader.setMaterials(materials);
            objLoader.load( obj, (model) => {
                mesh = model;
                scene.add(mesh);
            });
        });
        //objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );   
    }

    else if (obj !== undefined && mtl === undefined){
        var objLoader = new OBJLoader(manager);
        objLoader.load( obj, (model) => {
            mesh = model;
            scene.add(mesh);
        });
    }
}

seems to be something related to creatobjecturl from a blob not working if the file is an image

Can anyone show me how to modify the image loaders or texture loaders without breaking it, I’m still very new here

Any help would really be appreciated!
Thanks

2

can learn from this project: https://3dviewer.net/

1 Like