色々調べてみたものの、あまりスマートな方法が見つからず。
いわゆる「テクスチャアトラス」的なことをやろうと思ってごにょごにょしたときのメモです。
ちなみに↓のような画像を用意して、それをマウスオーバーで切り替える、というようなものをイメージしています。
CSSとかでもよく使われる方法ですね。
// UV座標のAttributeを取得
var attr = mesh.geometry.getAttribute('uv');
for (var i = 1, l = attr.array.length; i < l; i += 2) {
// UV座標は(x, y)の2要素のベクトルなので、Yの値を半分にする
attr.array[i] /= 2;
}
やっていることは単純で、UV座標は(x, y)の形で1次元配列で格納されているようなので、取得した配列のYに当たる値を半分にしています。（※）
※ ... 今回は上記画像のように、縦にふたつ並んだボタンを想定しているために半分にしていますが、テクスチャアトラスのように縦横に複数の要素を並べた場合はそれ用にしっかりと計算しないとなりません。
ドキュメントを見ると以下の要素が取得できるようです。（UVが載ってないので全部じゃないかもしれません）
| attribute | item size | description |
|---|---|---|
| position | (itemSize: 3) | Stores the x, y, and z coordinates of each vertex in this geometry. Set by .fromGeometry(). |
| normal | (itemSize: 3) | Stores the x, y, and z components of the face or vertex normal vector of each vertex in thi |
| color | (itemSize: 3) | Stores the red, green, and blue channels of vertex color of each vertex in this geometry. S |
| tangent | (itemSize: 3) | Stores the x, y, and z components of the tangent vector of each vertex in this geometry. Se |
| index | (itemSize: 3) | Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles," and works much the same as it does in Geometry: each triangle is associated with the index of three vertices. This attribute therefore stores the index of each vertex for each triangular face. If this attribute is not set, the renderer assumes that each three contiguous positions represent a single triangle. In addition to the the built-in attributes, you can set your own custom attributes using the addAttribute method. With Geometry, these attributes are set and stored on the Material. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is stored in the BufferGeometry. |