Load JSON 3D models compressed in a zip archive file in Three.js by Shu Miyao

Posted on 28 July, 2017

As I am getting used to Three.js, I started wanting to use something more complex rather than simple cylinders and spheres. Three.js supports loading of models exported from Blender 3D as JSON text files. That is great already. But I noticed that loading numbers of files at a time is not good idea. When the models have so many meshes, it is even worse because they tend to be larger or huge files.

After googling a while I ended up with ZipLoader class by yomotsu published on Github. ZipLoader is "a light weight zip file loader (for javascript) and unzipper for Web browsers. (only 25KB (gzipped 9KB) ) Plus, It makes easy to make loading progress bar." And the class library supports Three.js. Perfecto.

Here is a sample code.

There needs a small trick to get Three.js's loading manager working with ZipLoader. You need to use itemStart method of Three's loading manager to manually enqueue the loading, and use the itemEnd method of the Three.JS's loading manager to manually let the manager know about the ending of loading process. You can stick with the Three'js loading mechanism while you also use other Three.js factory loaders as well as the ZipLoader few more times simultaneously without headaches.

The zip file used in the sample script above is about 102KB in size comprising 2 json text files. The original size is 352KB. That is about 70% reduction. I tried various files and the reduction was around 70~85%.

However there is a warning that could save you some time. If you are using MacOS, Zip archive files should be created from terminal (on MacOS). If you try to load zip files made with MacOS's right click contextual menu, you will face "Uncaught buffer error".