LoginSignup
3

More than 5 years have passed since last update.

posted at

updated at

Organization

Three.jsで動的に生成したパターンをテクスチャーにするには

背景

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;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3