three.jsでテクスチャをはる場合の画像のサイズについて

100*100の大きさの面に100*100のテクスチャをはるのは特に違和感なくはれます。

100*100の大きさの面に50*50のテクスチャをはると100*100の面にうまくはりつくように画像が拡大されてはりつきます。100*100の大きさの面に10*10のテクスチャをはると、とても画像が粗くなります。

100*100の大きさの面に100*50のテクスチャをはると100*100の面にうまくはりつくように…横だけ2倍に引き延ばされて画像が拡大されてはりつきます。

100*100の大きさの面に200*200のテクスチャをはると100*100の面にうまくはりつくように画像が縮小されてはりつきます。

100*100の大きさの面に100*100より小さいテクスチャをまんべんなくはりつけたい場合、repeatというメソッド(でいいのかな…)を使います。

例えば、100*100の大きさの面に16*16の大きさのテクスチャを10*10だけはりつけるのは以下のようなソースになります。
(Verは53です。)

  var texture = THREE.ImageUtils.loadTexture( "texture.jpg" );
  texture.wrapS   = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 10, 10 );  
  
  var material, geometry, mesh;
  geometry = new THREE.CubeGeometry(100, 100, 100, 1, 1, 1 );
  material = new THREE.MeshBasicMaterial( {map: texture} );
  mesh = new THREE.Mesh( geometry, material);
  scene.add( mesh );

repeatを使う場合、テクスチャの画像は正方形でpixcelが2の乗数である必要があります。
使える画像の大きさは
2*2
4*4
8*8
16*16
32*32
64*64
128*128
な感じになります。

2012-07-29 - tsuge development pageに(2012年08月4日補足: 当初8の倍数だと思っていましたが、その後の調査で40x40が駄目で48x48がOKだったので、どうも16の倍数のようでした)と書いてありますが、間違っています。
wgld.org | WebGL: テクスチャマッピング |等で書いてあるとおりテクスチャの画像は正方形でpixcelが2の乗数である必要があります。

上のソースだと、100*100の面を10*10に分割して、その分割された面に16*16の画像がはりつくようになります。100*100の面を10*10に分割すると、1つあたりの大きさが10*10になります。これに16*16の画像がはりつくので、画像は縮小されて10*10の面にはりつきます。

逆に1つあたりの大きさが画像より大きくなると画像が拡大されてはりつきます。


1つ1つの面の大きさが違う場合は、面倒ですけど1つ1つの面用のテクスチャを用意しないと、例えば100*50*100のcubeを用意して、どの面も一律10*10に分割した場合、上の面はテクスチャをはる1つ分の大きさが10*10になるのに対して、横の面は10*5になります。
そこに16*16の大きさのテクスチャをはると…いまいちな結果になります。

横の面は texture.repeat.set( 10, 5 );かな…試していないので、引数の順序が逆かもですが…な感じでテクスチャを設定する必要があるでしょう。

three.jsを学習して思いますが、3Dを扱える方はすごいと思います。
紙に書かないと空間を想像できないです…