THREE.js - Can't load texture locally

Question

I have a local file in which I try to load texture like this:

var texture = THREE.ImageUtils.loadTexture( \'image.jpg\' );
var cubeGeo = new THREE.CubeGeomet         


        

Answer 1

Probably late to the party, again.

You actually can do that without setting up a node server, unless ofcourse, you need a backend anyways.

You can basically do this by loading your local image into the browser by converting it into a Base64 string using the FileReader object.

After you convert the image to a Base64 string you can either save it to sessionStorage (limited to ~4 Mb on average), or keep the string saved in some variable while your "app" is running.

You can then convert the base64 string to a three.js texture, and apply it to an object in your scene. Note the asynchronous render call in the example below; You have to render the scene after the texture fully loads, otherwise, it simply won't show.

In the below case, I load the three.texture with my image that I've uploaded to sessionStorage.

TEXTURE = THREE.ImageUtils.loadTexture(
      sessionStorage.getItem('myBase64Img');
      {},
      function () { renderScene(); /* async call after texture is loaded */ }
    );

Cheers!