Animating Canvas Billboard in THREE.js

Question

Everyone,

I\'m trying to animate a Canvas-based texture that is mapped onto a plane, like a billboard. I\'ve made a point of including material.needsUpdate

Answer 1

The needsUpdate flag is reset (to false) every time the texture is used (every render loop), so it needs to be set to true in the render loop (before the render call, or it'll be a frame off). So in your example, put sign.material.map.needsUpdate = true before renderer.render( scene, camera ). texture.needsUpdate = true and material.needsUpdate = true are not needed.

Also, you only need to set the needsUpdate flag on the texture, as the material properties are not changing.

Answer 2

Place this right before your render() call:

sign.material.map.needsUpdate = true;

Fiddle: http://jsfiddle.net/pPKVa/