【Three.js】UVマッピングによる平面ジオメトリのアニメーション操作（テクスチャーの入れ替え）

忘備録。

Three.jsの日本語の情報が非常に少なく、webゲームを作る上では、ほぼ必須な技術である、テクスチャの画像を入れ替えた「2Dアニメーション」とかの（へっぽこエンジニアの私でも理解できる簡単な）説明を全然見かけなかったので、コードを作成。

（ボックスのUV操作はあるのに、なぜか基礎である平面のUV操作は見かけず……）

以下は、geometryにUVマッピングを適用したものですが、このジオメトリを使用しても特に何も変化はありません。

（UVの座標を、元の画像の座標に設定しているため）

しかしながら、faceVertexUvsの適応があるため「uv1」や「uv2」の値をごにょごにょといじると、geometryに設定したテクスチャ画像の回転、拡大、縮小、部分切り取りなどが行なえます。

（UVマッピングの座標変換については省略。他の方が説明してくれているので、そちらを参考にしてください）

テクスチャ画像の部分切り取りができれば、当然「連番で並んだ画像」の連結画像の一部を表示することもできるため、2Dゲームにありがちな画像のアニメーションも3Dで実現可能になります。

ちなみに、クラス内でgeometryとmeshを定義済みで、後から指定の範囲の画像を使用したい場合は、以下のようなメソッドが便利です。

参考になれば、幸いです。

追記：

上記の手法だと、ジオメトリ宣言後の画像の入れ替えは行えないかもしれません（勉強したばっかりなので、あまりよく知らない）。

アニメーションの操作を行いたい時は、一例ですが、

texture.repeat.set(0.25,1.0)

texture.offset.x = 0.5

のようにすると、テクスチャの画像の一部を引っ張ってこれるので、それを元に適切なメソッドを用意すれば、アニメーション操作が行えると思います。