Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple progressive texture image loader for Three.js
/**
* @author knee-cola / https://github.com/knee-cola
* Original file URL: https://gist.github.com/knee-cola/37875bc4359609b96c9f329cd2a68fa1
*/
// This is a simple progressive image loader for Three.js
// It enables the smaller image files to be loaded first,
// before the big texture image is fully loaded.
//
// The images are loaded in the order they are passed
// to the loader
//
// Here's a simple example:
//
// // defining an array of different sizes of images
// // Hint: apart from degrading image resolution, smaller image files
// // can also be produced by increasing the JPG compression
// var imageUrls = ['480p.jpg', '720p.jpg', '1080p.jpg', '2048p.jpg']:
//
// // creating material - we call the loader function
// var material = new THREE.MeshBasicMaterial({ map: THREE.ProgressiveImageLoader(imageUrls) })
//
// var mesh = new THREE.Mesh(geometry, material);
// scene.add(mesh);
//
(function() {
THREE.ProgressiveImgLoader = function() { };
var proto = THREE.ProgressiveImgLoader.prototype = Object.create( THREE.EventDispatcher.prototype );
proto.load = function(images) {
var self = this;
var texture = new THREE.Texture();
// create an image object
var imageObj = self.imageObj = new Image(),
loadingIx = 0;
// this needs to be sit in order not to get "Tainted canvases may not be loaded." WebGL error
imageObj.crossOrigin = "anonymous";
imageObj.onload = function() {
// [imageObj] is set to NULL when the object is disposed
if(self.imageObj) {
texture.image = imageObj;
texture.needsUpdate = true;
if(loadingIx < images.length) {
self.dispatchEvent({type: 'progress', imageIndex: loadingIx});
imageObj.src = images[loadingIx++];
} else {
self.dispatchEvent({type: 'done'});
self.imageObj = null;
}
}
}; // imageObj.onload = function() {...}
// the loading process will begin after we set the [src] property
imageObj.src = images[loadingIx++];
return(texture);
}; // proto.load = function(images) {...}
proto.dispose = function() {
// stop loading current image
this.imageObj.src = '';
this.imageObj = null;
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment