-
-
Save iambigd/9e060164666371f13c92d1bcbc950c6c to your computer and use it in GitHub Desktop.
Loading THREE textures with onProgress events
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const THREE = require('three'); | |
function AjaxTextureLoader() { | |
/** | |
* Three's texture loader doesn't support onProgress events, because it uses image tags under the hood. | |
* | |
* A simple workaround is to AJAX the file into the cache with a FileLoader, then extract that into a | |
* texture with a separate TextureLoader call. | |
*/ | |
THREE.Cache.enabled = true; // turns on shared caching for FileLoader, ImageLoader and TextureLoader | |
const textureLoader = new THREE.TextureLoader(); | |
const fileLoader = new THREE.FileLoader(); | |
const nop = ()=> {}; | |
function load(url, onLoad, onProgress, onError) { | |
fileLoader.load(url, loadTextureFromCache, onProgress, onError); | |
function loadTextureFromCache() { | |
textureLoader.load(url, onLoad, nop, onError); | |
} | |
} | |
Object.assign(this, textureLoader, {load}); | |
} | |
module.exports = AjaxTextureLoader; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment