I've been working on creating a texture from a canvas. I managed to successfully render a blank canvas, but encountered issues when trying to draw an image on the canvas and then render it. This is the code snippet I am currently using:
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);
Initially, the canvas renders properly with the texture. However, as soon as I draw an image on the canvas like this:
canvas.drawImage(image, 0, 0, 50, 50);
plane.material.map.needsUpdate = true;
The area where the image should appear turns black instead of displaying the image correctly. Any suggestions on how to resolve this issue and make the canvas render properly?