【Three.js】「faceVertexUvs」を用いた「画像の分割」と「アニメーションの生成方法」

「Three.jsのテクスチャのアニメーションって一体どうやるんだー！」という人向け。

基本的な技術にもかかわらず、Three.jsの日本語の情報が少なすぎて、こういった方法すら見つけられないので、自分で作成しました。

(ヽ´ω`)

以下、すでにmeshが作成された、プレーン（plane）のジオメトリ（geometry）で、テクスチャを入れ替えるメソッドです（正確には、ジオメトリに反映されたテクスチャ画像をずらすだけ。テクスチャ自体はいじっていません）。

（※１ 上記のメソッドは、meshやgeometryを管理するクラスの中で用いたれているため、thisが発生しています。もし、このコードを使う際は、自身のプログラムに合わせて変更して下さい）

（※２ 応用すれば、3Dボックスの一部の画像を入れ替えたりする、ということもできます）

一例ですが、以下のような連番の画像をまとめておけば、メソッドで１画像ずつ呼び出すことで、アニメーションを生成することができます。

このメソッドの優れている点は、リアルタイムで変更できるというものです。

通常、

・ジオメトリを作成した時点でテクスチャを割り当てた

・「geometry.faceVertexUvs」を定義した

だけだったりすると、（Three.jsの仕様なのか）以降テクスチャの入れ替え（ずらし）ができなくなったりしますが、メッシュが作成された後のジオメトリに対して「faceVertexUvs.set（通常の変数の代入ではダメ）」と「mesh.geometry.uvsNeedUpdate = true」を用いると、さらっと入れ替えられます。

3Dのブラウザゲームとかを制作する場合は（というか、Three.jsでゲームを作る場合は）、こういった連番画像の部分読み込みが必須の技術なので、覚えておいても損はないと思います。

よかったら、使ってみて下さい。

( ・ω・)ノ

……え、UnityかPlayCanvasで十分ですって？

そりゃ、まぁ、3Dプログラムを直で作るなんて普通はしませんよね（泣）。