Three.js problems with rendering texture from canvas

Question

I'm trying to make a texture form a canvas. I was able to make a blank canvas render properly, but when i try to draw an image on the canvas and then render it, it fails to render properly. My code looks like this:

    var canvas= document.createElement('canvas');
    canvas.width = 100;
    canvas.height = 100;
    var texture = new THREE.Texture(canvas);
    var mat = new THREE.MeshPhongMaterial();
    mat.map = texture;

    var mesh = new THREE.Mesh(new THREE.PlaneGeometry(20, 20), mat);
    var plane = mesh;
    scene.add(plane);

When I first initialize the canvas, the texture renders properly, however, when I draw an image on the canvas like this:

canvas.drawImage(image, 0, 0, 50, 50);
plane.material.map.needsUpdate = true;

The texture becomes black where the image is supposed to be. How can I make the canvas render properly?

Answer 1

You should do this to create your material :

var mat = new THREE.MeshPhongMaterial({map: texture});

It's the same as you did but it's more clear to other user that the material use a texture.

Secondly, be cautious with the Phong Material, if you didn't set any light in the scene you could have just basic issue with the renderer showing a black texture because there is no light in front of it.