Three.js 2D texture \スプライトをアニメーションに使用する（planeGeometry）

Question

私はhtml5とthree.jsでかなり新しいです。私はちょっと試してきました。基本的には、メッシュを使用することです（私は、使用したチュートリアルのように、planeGeometryを使用しています）。メッシュには異なるテクスチャが表示され、後で変更できます。

は、ここに私のコードは次のようになります。

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelMesh = new THREE.Mesh(new THREE.PlaneGeometry(79, 53, 79, 53), new THREE.MeshBasicMaterial({ map: angelTexture, wireframe: false })); 

angelMesh.position.x = 0; 
angelMesh.position.y = 0; 
scene.add(angelMesh); 

問題は、私は2Dスプライトとしてテクスチャを使用しています（私はオフセットたび、メッシュは、他のすべてのスプライトを表示するのに十分な大き思われることであるIアニメーション化するためにオフセット）。結果は非常に悲惨で、私はまだスプライトのスナップショットを1つしか表示しないようにメッシュの大きさを制御する方法を考え出しています。すべての私の試みは、メッシュのサイズを変更するだけで、基本的なテクスチャと同様にすべてのスプライトを表示します。

誰かが正しい方向に向かうことができますか？前もって感謝します。

...

私の友人は、私はリピートプロパティを逃した ...解決策を考え出しました。

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelTexture.repeat.x = 0.25; 
angelTexture.repeat.y = 0.25; 
scene.add(angelMesh); 

これは、同じ問題を抱える他の人に役立ちます。

Answer 1

以前は同じ質問がありました。そのため、PlaneGeometryのテクスチャとしてスプライトシートを使用してアニメーションを作成し、定期的にテクスチャを更新するという完全な例を書きました。

http://stemkoski.github.io/Three.js/Texture-Animation.html

さらに詳しい説明については、コメント付きのソースコードを参照してください。