Feature Request- Ability to auto detect and load models from .zip or .rar #136

README.md

@@ -62,4 +62,4 @@ The repository is separated into two parts. See more information in the [Develop
 
 ## External Libraries
 
-Online 3D Viewer uses these wonderful libraries: [jquery](https://github.com/jquery/jquery), [pickr](https://github.com/Simonwep/pickr), [three.js](https://github.com/mrdoob/three.js), [draco](https://github.com/google/draco), [rhino3dm](https://github.com/mcneel/rhino3dm), [web-ifc](https://github.com/tomvandig/web-ifc).
+Online 3D Viewer uses these wonderful libraries: [three.js](https://github.com/mrdoob/three.js), [jquery](https://github.com/jquery/jquery), [pickr](https://github.com/Simonwep/pickr), [fflate](https://github.com/101arrowz/fflate), [draco](https://github.com/google/draco), [rhino3dm](https://github.com/mcneel/rhino3dm), [web-ifc](https://github.com/tomvandig/web-ifc).

libs/loaders/fflate.license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Arjun Barrett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -32,6 +32,7 @@
 		"globals": {
 			"OV": "writable",
 			"$": "readonly",
+			"fflate": "readonly",
 			"Pickr": "readonly",
 			"THREE": "readonly",
 			"DracoDecoderModule": "readonly",

sandbox/embed_selfhost_externallibs.html

@@ -104,6 +104,10 @@
         model="../../test/testfiles/gltf/DamagedHelmet/glTF-Binary/DamagedHelmet.glb"
 		environmentmap="../website/assets/envmaps/fishermans_bastion/posx.jpg,../website/assets/envmaps/fishermans_bastion/negx.jpg,../website/assets/envmaps/fishermans_bastion/posy.jpg,../website/assets/envmaps/fishermans_bastion/negy.jpg,../website/assets/envmaps/fishermans_bastion/posz.jpg,../website/assets/envmaps/fishermans_bastion/negz.jpg">
 	</div>	
+    <div class="online_3d_viewer"
+		style="width: 360px; height: 240px;"
+        model="../../test/testfiles/zip/cube_four_instances.zip">
+	</div>
 </body>
 
 </html>

source/import/filelist.js

@@ -13,6 +13,11 @@ OV.File = class
             this.fileObject = file;
             this.name = OV.GetFileName (file.name);
             this.extension = OV.GetFileExtension (file.name);
+        } else if (source === OV.FileSource.Decompressed) {
+            this.fileUrl = null;
+            this.fileObject = null;
+            this.name = OV.GetFileName (file);
+            this.extension = OV.GetFileExtension (file);
         }
         this.content = null;
     }
@@ -90,7 +95,7 @@ OV.FileList = class
         }
         for (let i = 0; i < this.files.length; i++) {
             let file = this.files[i];
-            if (file.source === OV.FileSource.File) {
+            if (file.source !== OV.FileSource.Url && file.source !== OV.FileSource.Decompressed) {
                 return false;
             }
         }

source/import/importer.js

@@ -204,6 +204,39 @@ OV.Importer = class
             this.fileList = newFileList;
         }
         this.fileList.GetContent (() => {
+            this.DecompressArchives (this.fileList, () => {
+                onReady ();
+            });
+        });
+    }
+
+    DecompressArchives (fileList, onReady)
+    {
+        let files = fileList.GetFiles ();
+        let archives = [];
+        for (let file of files) {
+            if (file.extension === 'zip') {
+                archives.push (file);
+            }
+        }
+        if (archives.length === 0) {
+            onReady ();
+            return;
+        }
+        OV.LoadExternalLibrary ('loaders/fflate.min.js').then (() => {
+            for (let i = 0; i < archives.length; i++) {
+                const archiveBuffer = new Uint8Array (archives[0].content);
+                const decompressed = fflate.unzipSync (archiveBuffer);
+                for (const fileName in decompressed) {
+                    if (Object.prototype.hasOwnProperty.call (decompressed, fileName)) {
+                        let file = new OV.File (fileName, OV.FileSource.Decompressed);
+                        file.SetContent (decompressed[fileName].buffer);
+                        fileList.AddFile (file);
+                    }
+                }    
+            }
+            onReady ();
+        }).catch (() => {
             onReady ();
         });
     }

source/import/importerthree.js

@@ -46,7 +46,7 @@ OV.ThreeLoaderFbx = class extends OV.ThreeLoader
     GetExternalLibraries ()
     {
         return [
-            'three_loaders/fflate.min.js',
+            'loaders/fflate.min.js',
             'three_loaders/TGALoader.js',
             'three_loaders/FBXLoader.js'
         ];
@@ -182,7 +182,7 @@ OV.ThreeLoader3mf = class extends OV.ThreeLoader
     GetExternalLibraries ()
     {
         return [
-            'three_loaders/fflate.min.js',
+            'loaders/fflate.min.js',
             'three_loaders/3MFLoader.js'
         ];
     }

source/io/fileutils.js

@@ -1,7 +1,8 @@
 OV.FileSource =
 {
     Url : 1,
-    File : 2
+    File : 2,
+	Decompressed : 3
 };
 
 OV.FileFormat =

test/testfiles/zip/cube_with_materials.mtl

@@ -0,0 +1,25 @@
+newmtl Red
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.000000 0.000000
+Ks 0.500000 0.500000 0.500000
+
+newmtl Green
+Ka 0.000000 0.000000 0.000000
+Kd 0.000000 0.800000 0.000000
+Ks 0.500000 0.500000 0.500000
+
+newmtl Blue
+Ka 0.000000 0.000000 0.000000
+Kd 0.000000 0.000000 0.800000
+Ks 0.500000 0.500000 0.500000
+
+newmtl White
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.800000 0.800000
+Ks 0.500000 0.500000 0.500000
+
+newmtl Texture
+Ka 0.000000 0.000000 0.000000
+Kd 0.800000 0.800000 0.800000
+Ks 0.500000 0.500000 0.500000
+map_Kd cube_texture.png

test/testfiles/zip/cube_with_materials.obj

@@ -0,0 +1,38 @@
+# Cube with Materials
+
+mtllib cube_with_materials.mtl
+
+g Cube
+
+v 0.0 0.0 0.0
+v 1.0 0.0 0.0
+v 1.0 1.0 0.0
+v 0.0 1.0 0.0
+v 0.0 0.0 1.0
+v 1.0 0.0 1.0
+v 1.0 1.0 1.0
+v 0.0 1.0 1.0
+
+vn 1.0 0.0 0.0
+vn -1.0 0.0 0.0
+vn 0.0 1.0 0.0
+vn 0.0 -1.0 0.0
+vn 0.0 0.0 1.0
+vn 0.0 0.0 -1.0
+
+vt 0.0 0.0
+vt 1.0 0.0
+vt 1.0 1.0
+vt 0.0 1.0
+
+usemtl Red
+f 1/1/4 2/2/4 6/3/4 5/4/4
+usemtl Green
+f 2/1/1 3/2/1 7/3/1 6/4/1
+usemtl Blue
+f 3/1/3 4/2/3 8/3/3 7/4/3
+usemtl Texture
+f 4/1/2 1/2/2 5/3/2 8/4/2
+usemtl White
+f 1/1/6 4/2/6 3/3/6 2/4/6
+f 5/1/5 6/2/5 7/3/5 8/4/5

test/tests/importer_test.js

@@ -268,5 +268,39 @@ describe ('Importer Test', function () {
                 }
             });
         });
+    });
+
+    it ('Zip file', function (done) {
+        let files = [
+            new FileObject ('zip', 'cube_four_instances.zip')
+        ];
+        ImportFiles (files, {
+            success : function (importer, importResult) {
+                assert (!OV.IsModelEmpty (importResult.model));
+                assert.deepStrictEqual (importResult.usedFiles, ['cube_four_instances.3ds', 'texture.png']);
+                assert.deepStrictEqual (importResult.missingFiles, []);
+                done ();
+            },
+            error : function (importer, importError) {
+                assert.fail ();
+            }
+        });
+    });    
+
+    it ('Zip file with Folders', function (done) {
+        let files = [
+            new FileObject ('zip', 'cube_four_instances_folders.zip')
+        ];
+        ImportFiles (files, {
+            success : function (importer, importResult) {
+                assert (!OV.IsModelEmpty (importResult.model));
+                assert.deepStrictEqual (importResult.usedFiles, ['cube_four_instances.3ds', 'texture.png']);
+                assert.deepStrictEqual (importResult.missingFiles, []);
+                done ();
+            },
+            error : function (importer, importError) {
+                assert.fail ();
+            }
+        });
     });    
 });

test/utils/globals.js

@@ -69,6 +69,9 @@ global.document = {
                 if (element.src.indexOf ('draco') !== -1) {
                     global.DracoDecoderModule = require (element.src);
                     element.onload ();
+                } else if (element.src.indexOf ('fflate') !== -1) {
+                    global.fflate = require (element.src);
+                    element.onload ();
                 } else {
                     element.onerror ();
                 }

website/o3dv/js/sharingdialog.js

@@ -102,7 +102,9 @@ OV.ShowSharingDialog = function (importer, settings, camera)
     let modelFiles = [];
     for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
         let file = files[fileIndex];
-        modelFiles.push (file.fileUrl);
+        if (file.source === OV.FileSource.Url) {
+            modelFiles.push (file.fileUrl);
+        }
     }
 
     let sharingLinkParams = {