How to update cube face canvas texture

Hi there,

I’m quite a beginner with three.js and I’m trying to update text string on a canvas that is a the texture of a cube face.

Here’s the relevant code I use for texture creation:

var canvas = changeCanvas(); // a custom function just to get the canvas by its id and change the text on it
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
materials.push( new THREE.MeshBasicMaterial( { map: texture, overdraw: true } ) ); // for the canvas face only. other faces are just new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } )

For Cube creation I use the following:

cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );

I’m using WebGLRenderer but I’ve also tried to use CanvasRenderer.

The cube is created and on of its faces is indeed the canvas with the text string (other 5 faces are just color squares). I also have on the page the canvas which I choose to show just for debugging purposes.

My problem is that after creation of the cube the text string is changed. I see the changes on the canvas I created in the page. but the same canvas and the text string are not updated when presented on the cube face. I’ve look at number of examples

What am I missing to make the texture updating? I’ve looked at several code examples here plus searched the issues but I still can’t find a solution for this.

Thanks in advance for any help 😃

[mrdoob]

#1979

[WestLangley]

You need to set texture.needsUpdate = true; as it is set to false afer rendering.

http://jsfiddle.net/xF27w/7/

EDIT:

onKeyDown doesn’t work there.

It does in this fiddle. (I haven’t studied it, so I don’t know what the trick is.) http://jsfiddle.net/2TCvY/3/