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!

Answer 2

To further explain (because I was confused as well), you can install a local server (I used node - http://nodejs.org/download/ to download node).

After, to install server cd to your project directory and run in command line:

npm install http-server -g

To run:

http-server

Then go to the default local page

http://localhost:8080/

and you should see your project there.

Answer 3

If you need to use textures in your project, you can convert images to base64 strings and then just assign them to your variables

Here is the sample: https://codepen.io/tamlyn/pen/RNrQVq

var texture = new THREE.Texture();
texture.image = image;
image.onload = function() {
texture.needsUpdate = true;
};

Where image was read from the base64 string

So you can create res.js and just write there all the textures :) it's not very good, because if you change some images, you have to reconvert them to base64, but it works in any browser (even Ms edge)

Answer 4

Your problem is due to security restrictions.

Run a local server.

For more info, see the three.js wiki article How to Run Things Locally.

three.js r.112