SQLの窓 イラストAC フリー素材

2013年03月30日

Three.js(r57) : THREE.Texture のプロパティの意味

THREE.ImageUtils.loadTexture

まず、画像を loadTexture で読み込むわけですが、この際指定するのは URL です。そして、実行後返されるのが THREE.Texture になります。
CanvasRenderer で別ドメインの画像を読み込む場合は、loadTexture 実行前に、THREE.ImageUtils.crossOrigin = null; を実行して下さい
この THREE.Texture のコンストラクタの引数は、以下のようになっています。
THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
これらは、loadTexture の中で、『var texture = new THREE.Texture( image, mapping );』として処理されているので wrapS 以降はデフォルト値となります。

wrapS, wrapT

この二つの値は、テクスチャの x座標(S) と y座標(T) 方向の処理方法をセットする事ができ、その値は以下の三種類です。
// Wrapping modes

THREE.RepeatWrapping = 1000;
THREE.ClampToEdgeWrapping = 1001;
THREE.MirroredRepeatWrapping = 1002;
デフォルトは、THREE.ClampToEdgeWrapping で、テクスチャを面に対して伸縮してセットする事を意味します。THREE.RepeatWrappingTHREE.MirroredRepeatWrapping は、それぞれテクスチャを繰り返してマッピングするもので、前者は境界毎に同じものが繰り返され、後者は境界毎に反転されたものが使用されます。 但し、繰り返し指定時には、プロパティの repeat に対して x 座標方向と y座標方向に繰り返す数を set メソッドで指示する必要があります。
例) map.repeat.set( 1, 3 );
※ (注意) CanvasRenderer では、THREE.MirroredRepeatWrapping は動作しません( WebGLRenderer は動作します ) CanvasRenderer ( これはバグっぽいですね ) 正常なソースコード WebGLRenderer anisotropy このプロパティは、デフォルトでは 1 ですが、大きくする事によってテクスチャのマッピングの品質を上げます。しかし、実際は目視してもほとんど変わらない事が多いと思います。 いずれのプロパティも、3D の処理における一般的な呼び名で、Three.js 内で説明を見つける事はできませんが、インターネットでは解説の中で当たり前のように表現されています。 その他のデフォルト値 mapping : new THREE.UVMapping() magFilter : THREE.LinearFilter minFilter : THREE.LinearMipMapLinearFilter format : THREE.RGBAFormat; type : THREE.UnsignedByteType;
タグ:Three.js
【Three.js : ベーシックの最新記事】
posted by at 2013-03-30 02:33 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする