THREE.ZipLoader

Zip archived model file Loading helper for Three.js (>= r89dev)

Demo

Demo with glTF 2.0 model

Browser

How to use

Use THREE.ZipLoader

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/takahirox/THREE.ZipLoader/v0.0.1/build/ziploader.min.js"></script>
<script>
	var url = 'models/BoomBox.zip';
	//var url = 'models/gltf/BoomBox.gltf';

	var manager = new THREE.LoadingManager();

	new Promise( function( resolve, reject ) {

		if ( url.match( /\.zip$/ ) ) {

			new THREE.ZipLoader().load( url ).then( function( zip ) {

				manager.setURLModifier( zip.urlResolver );

				resolve( zip.find( /\.(gltf|glb)$/i )[ 0 ] );

			} );

		} else {

			resolve( url );

		}

	} ).then( function ( file ) {

		new THREE.GLTFLoader( manager ).load( file, function ( gltf ) {

			scene.add( gltf.scene );

		} );

	} );
</script>

or use THREE.ZipLoadingManager

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.rawgit.com/takahirox/THREE.ZipLoader/v0.0.1/build/ziploader.min.js"></script>
<script>
	var url = 'models/BoomBox.zip';
	//var url = 'models/gltf/BoomBox.gltf';

	THREE.ZipLoadingManager
			.uncompress( url, [ '.gltf', '.glb' ] )
			.then( function ( zip ) {

		new THREE.GLTFLoader( zip.manager ).load( zip.urls[ 0 ], function ( gltf ) {

			scene.add( gltf.scene );

		} );

	} );
</script>

Note: API hasn't been fixed yet!

NPM

How to install

$ npm install three-ziploader

How to build

$ git clone https://github.com/takahirox/THREE.ZipLoader.git
$ cd THREE.ZipLoader
$ npm install
$ npm run all

Links

• Dependencies
  • Three.js: https://github.com/mrdoob/three.js/
  • JSZip: https://stuk.github.io/jszip/
• Polyfill
  • Promises: https://github.com/stefanpenner/es6-promise