User uploaded textures in three.js

Question

Here you will find a jsFiddle adaptation of the problem.

I would like to create a 3d web application in which the user is able to select an image file on their local

Answer 1

I have an example as a solution: http://develoteca.com/EjerciosOnline/Exampleplane libraries use: - modal - jcrop - html5canvas Greetings.

Answer 2

I also had this problem, but I had almost exact code only I was using

var map = THREE.ImageUtils.loadTexture( e.target.result );

So I had to replace that code with

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

and that solved the problem..

Answer 3

The solution actually turns out to be commonly used to preview local images prior to, say, uploading them a server. The image you are trying to render is converted to a data url where restrictions about cross origin policies do not apply. The corrected code is located here. What follows is the meat of it:

userImage = $("#userImage")[0];
if (userImage.files && userImage.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        image.src = e.target.result;
    };

    reader.readAsDataURL(userImage.files[0]);
}