three.js - Is it possible to use a 2d canvas as a texture for a cube?

Question

I want to add images to one face of a cube, possibly using a 2d canvas element as the face texture. Here is my code, but I can't get the result I want. The face using the canvas as a texture is blank, the other faces use a THREE.ImageUtils.loadTexture and they're fine.

var renderer, camera, scene;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var image0 = new Image();
var image1 = new Image();

image0.onload = function() {
    context.drawImage(image0, 0, 0);
};
image0.src = 'textures/nx.jpg';

var texture = new THREE.Texture(canvas);

texture.needsUpdate = true;

init();
animate();

function init(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();

    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: texture }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/ny.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/nz.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/px.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/py.jpg' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/pz.jpg' ) }));

    var geometry = new THREE.CubeGeometry( 400, 400, 400 );
    var DiceBlueMaterial = new THREE.MeshFaceMaterial(materialArray);
    mesh = new THREE.Mesh( geometry, DiceBlueMaterial);
    scene.add( mesh );
    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame( animate );

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    renderer.render( scene, camera );
}

Answer 1

The texture.needsUpdate is probably being set too early. Try this:

var texture = new THREE.Texture(canvas);

image0.onload = function() {
    context.drawImage(image0, 0, 0);
    texture.needsUpdate = true;
};
image0.src = 'textures/nx.jpg';