How to extract Zip from local machine and run 3d model on canvas

I am following :slight_smile:
three.js/Loader.js at 3b4160c3dc0670b1eb5df0512c939bab57269385 · mrdoob/three.js · GitHub

But it is not working as expected.

Issues are:
1: - var materials = new MTLLoader().parse(zip.file(‘materials.mtl’));

Expected 2 arguments, but got 1

: An argument for ‘path’ was not provided.

2: - zip.filter (…) is throwing error

It should be:

var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );

Without showing your complete code I can tell something about this error.

Thank you for your attention!!

Error i am facing is :slight_smile:

Error: This method has been removed in JSZip 3.0, please check the upgrade guide.

i have gone through documentation of JSZip and made changes in code like:

var zip = new JSZip(file); is replaced with JSZip.loadAsync(file).then((zip)=>{};

But still getting same Error.

What more changes I need to do?
Here my Loding manager is not working. what should i do?

my code:

JSZip.loadAsync(file).then((zip)=>{

    console.log(zip)

// Poly

if (zip.files['model.obj'] && zip.files['materials.mtl']) {

    

    var materials = new MTLLoader().parse(zip.file('materials.mtl').asText());

    var object = new OBJLoader().setMaterials(materials).parse(zip.file('model.obj').asText());

}

//

zip.filter(function (path, file) {

    console.log(path, file);

    var manager = new THREE.LoadingManager();

    manager.setURLModifier(function (url) {

        console.log(url);

        var file = zip.files[url];

        console.log(zip.files[url]);

        if (file) {

            console.log('Loading', url);

            var blob = new Blob([file.asArrayBuffer()], { type: 'application/octet-stream' });

            return URL.createObjectURL(blob);

        }

        return url;

    });

    var extension = file.name.split('.').pop().toLowerCase();

    switch (extension) {

        

        case 'glb':

            var dracoLoader = new DRACOLoader();

            dracoLoader.setDecoderPath('../examples/js/libs/draco/gltf/');

            var loader = new GLTFLoader();

            loader.setDRACOLoader(dracoLoader);

            loader.parse(file.asArrayBuffer(), '', function (result) {

                var scene = result.scene;

            

            });

            break;

        case 'gltf':

            console.log("start");

            var dracoLoader = new DRACOLoader();

            dracoLoader.setDecoderPath('../examples/js/libs/draco/gltf/');

            console.log(manager,file,scene);

            var loader = new GLTFLoader(manager);

            loader.setDRACOLoader(dracoLoader);

            loader.parse(file.asText(), '', function (result) {

                console.log(result, scene);

                var gltf = result.scene;

                scene.add(gltf)

                console.log(scene);

            });

            console.log("end");

            break;

    }

});

})

Why don’t you just use the JSZip version from the official three.js repository?

Thank you !! Working fineeeeeee

I have one Question:

if in three/editor you are not extracting obj.zip file then what is purpose of these below lines:

if (zip.files['model.obj'] && zip.files['materials.mtl']) {

    var materials = new MTLLoader().parse(zip.file('materials.mtl').asText());

    var object = new OBJLoader().setMaterials(materials).parse(zip.file('model.obj').asText());

}

It’s only possible to drag’n’drop OBJ files to import them into the editor. It does not work if you drag’n’drop an OBJ with the respective MTL(s) at the same time. Just importing a single MTL file is not supported, too.

However, it is possible to import and OBJ/MTL bundle if you put it into a zip archive. However, the assets have to use specific names (model.obj and materials.mtl). Otherwise the editor is unable to recognize these files.