Loading assets into three.js using File API

Question

I'd like to create the functionality to import a 3D model to view in the browser by using the File API.

The three.js loaders work great on files that I host. My understanding is that the loader uses ajax to retrieve the file.

I'd like to be able to load the file from disk on the client to view it. How might this be accomplished?

Answer 1

You can override or "hot patch" the loaders' load() function to fit your needs.

Put your overrides before any other THREE.js -related code. For example:

THREE.OBJLoader.prototype.load = function(url) {
  // copy the function from OBJLoader.js source and change the AJAX calls to File API calls
}

It seems that unlike the others, ColladaLoader is not implemented using prototypes, so it's not as straightforward. If you need Collada support, you need to do it after Loader creation, and override the function directly on the loader instance. This approach should work also for OBJLoader and others. But you can't do this beforehand, you need to have the code in your actual model loading function/callback.

var myloader = new THREE.ColladaLoader();

myloader.load = function(url) {
  // copy the function from ColladaLoader.js source and change the AJAX calls to File API calls
}

I use similar approach in ImageLoader to automatically resize non-power-of-two textures to proper dimensions using canvas.