背景

Three.jsのデモでOceanを理解しようとrunstantで動かそうとしたら、
空と海の2箇所をテクスチャファイルとして参照していたので、
これの代わりに適当に動的にパターンを生成すれば、あれこれ試せそうと
思った。

多くの場合

waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' );

や

var loader = new THREE.ImageLoader();
loader.load( 'textures/skyboxsun25degtest.png', function ( image ) {

のようにファイルからテクスチャを生成している。

これを、動的にやるにはどうするのかということで
調べたら見つかった。

canvasを指定してTHREE.Textureを生成すれば良かった。
Oceanのようにテクスチャを時間変化される場合、
Texture#needsUpdateをtrueにしておく。

tex = new THREE.Texture(canvas);
tex.needsUpdate = ture;