takahirox / THREE.ZipLoader

Zip archived model file Loading helper for Three.js
MIT License
14 stars 7 forks source link
javascript three-js threejs webgl zip

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