Question

I know that in three.js we can load images directly from the server with ImageUtils and models as .js files with the JSONLoader, but is it possible to load images and models from byte arrays directly? (for example, download a compressed file, extract it in javascript and feed the byte array directly into the loaders?)

thanks

Answer 1

All right, I found the answers.

It can be done by adding our own extension methods to the concerned objects. For the texture loading we can load a binary array by adding a new method to imageutils like this:

THREE.ImageUtils.prototype.loadTextureBinary = function ( data, mapping, callback ) {

    var image = new Image(), texture = new THREE.Texture( image, mapping );

    image.onload = function () { texture.needsUpdate = true; if ( callback ) callback( this ); };
    image.crossOrigin = this.crossOrigin;
    image.src = "data:image/png;base64," + Base64.encode(data);

    return texture;
};

For loading string JSON, extract your data and make it into a string and pass it to this new extension method of JSONLoader:

THREE.JSONLoader.prototype.loadJson = function ( data, callback, texturePath ) {

    var worker, scope = this;

    texturePath = texturePath ? texturePath : this.extractUrlBase( url );

    this.onLoadStart();
    var json = JSON.parse( data );
    context.createModel( json, callback, texturePath );
};

Note: the above code is for Three.js r49. If a newer version has code changes, add them to the above methods to comply.