Need to render textures uploaded by user in input files with Canvas renderer three.js

Question

I've loaded a Blender model using the three.js library and want to allow the users to change the texture of some faces through an input field in a form. I don't have any problem when I use the WebGLRenderer, and it works fine in Chrome, but it doesn't work with the canvas renderer when the texture coming from the input is in data:image... format. Seems if I load a full path image from the server it works fine. Does anybody know if there's a way to load textures this way and render them with the canvasrenderer?

Thank you.

I add here the code after I set the camera, lights and detect it the browswer detects webgl or not to use the WebGLRenderer or the CanvasRenderer.

First I load the model from blender:

 var loader = new THREE.JSONLoader();
    loader.load('assets/models/mimaquina9.js', function (geometry, mat) {

        //I set the overdraw property to 1 for each material like i show here for 16    
        mat[16].overdraw = 1;          

        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(mat) );

        mesh.scale.x = 5;
        mesh.scale.y = 5;
        mesh.scale.z = 5;

        scene.add(mesh);

    }, 'assets/images');

        render();

    //To render, I try to make an animation in case WebGL is available and just render one frame in case of using the canvas renderer.
    function render() {

        if(webgl){

            if (mesh) {
                mesh.rotation.y += 0.02;
            }
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }
        else if(canvas){

            camera.position.x = 30;
            camera.position.y = 20;
            camera.position.z = 40;
            camera.lookAt(new THREE.Vector3(0, 10, 0));

            setTimeout(function (){

                //something you want delayed
                webGLRenderer.render(scene, camera);
            }, 1000);

        }

    }


   $('#datafile').change(function(e)
   {
       e.preventDefault();
       var f = e.target.files[0];

       if(f && window.FileReader)
       {

           var reader = new FileReader();

           reader.onload = function(evt) {
                console.log(evt);

                        mesh.material.materials[16].map = THREE.ImageUtils.loadTexture(evt.target.result);

                            if(canvas && !webgl){
//I read that might be a problem of using Lambert materials, so I tried this commented line without success
                                //mesh.material.materials[16] = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(evt.target.result)});
//If I uncomment the next line, it displays the texture fine when rendering after.    
                                //mesh.material.materials[16].map = THREE.ImageUtils.loadTexture("assets/images/foto.jpg");

                                render();

                            }

           }
           reader.readAsDataURL(f);


       }
   });

Thanks once more.

Answer 1

evt.target.result is a DataURL so you should assign that to a image.src. Something like this should work:

var image = document.createElement( 'img' );
image.src = evt.target.result;

mesh.material.materials[16].map = new THREE.Texture( image );