カスタムシェイプにテクスチャを適用する際に使用される座標系を変更します。
texture()が機能するためには、シェイプの表面上の点を 画像内のピクセルにマッピングする方法が必要です。rect()や box()などの組み込みシェイプには、すでに頂点に基づいた テクスチャマッピングがあります。vertex()で作成された カスタムシェイプには、uvコーディネートとして渡されるテクスチャマッピングが必要です。
vertex()の各呼び出しには、 vertex(x, y, z, u, v)のように5つの引数が必要です。これは、座標 (x, y, z)の頂点を画像内の座標(u, v)のピクセルにマッピングします。 例えば、長方形の画像の角は、デフォルトで長方形の角にマッピングされます：
// 画像をテクスチャとして適用する texture(img); <p>// 長方形を描画する rect(0, 0, 30, 50); </p>上のコードスニペットの画像が300 x 500ピクセルの寸法を持つ場合、 同じ結果を次のように達成できます：
// 画像をテクスチャとして適用する texture(img); <p>// 長方形を描画する beginShape();</p> <p>// 左上 // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// 右上 // u: 300, v: 0 vertex(30, 0, 0, 300, 0);</p> <p>// 右下 // u: 300, v: 500 vertex(30, 50, 0, 300, 500);</p> <p>// 左下 // u: 0, v: 500 vertex(0, 50, 0, 0, 500);</p> <p>endShape(); </p>textureMode()はuvコーディネートの座標系を変更します。
パラメータmodeは、2つの可能な定数を受け入れます。NORMALが 渡された場合（textureMode(NORMAL)のように）、テクスチャのuvコーディネートは 画像の寸法の代わりに0から1の範囲で提供できます。これは、異なるサイズの複数の画像に 同じコードを使用する場合に役立ちます。例えば、上のコードスニペットは 次のように書き直すことができます：
// 正規化された座標を使用するようにテクスチャモードを設定する textureMode(NORMAL); <p>// 画像をテクスチャとして適用する texture(img);</p> <p>// 長方形を描画する beginShape();</p> <p>// 左上 // u: 0, v: 0 vertex(0, 0, 0, 0, 0);</p> <p>// 右上 // u: 1, v: 0 vertex(30, 0, 0, 1, 0);</p> <p>// 右下 // u: 1, v: 1 vertex(30, 50, 0, 1, 1);</p> <p>// 左下 // u: 0, v: 1 vertex(0, 50, 0, 0, 1);</p> <p>endShape(); </p>デフォルトでは、modeはIMAGEで、uvコーディネートを画像の 寸法にスケーリングします。textureMode(IMAGE)を呼び出すと、デフォルトが 適用されます。
注意：textureMode()はWebGLモードでのみ使用できます。
実例
シンタックス
textureMode(mode)パラメーター
mode
Constant:
IMAGEまたはNORMAL。
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!