Three.js使用2D纹理\ sprite进行动画（planeGeometry）

我在html5和three.js中很新。我一直在试验它，基本上我想要做的是有一个Mesh（我使用planeGeometry，因为我遵循的教程使用了它）。网格显示不同的纹理，稍后可以更改。Three.js使用2D纹理 sprite进行动画（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雪碧我偏移动画）。结果是非常糟糕的，我仍然在思考如何控制Mesh的大小，以便它只显示Sprite的一个快照。我所有的尝试似乎只是调整Mesh以及底层纹理的大小，并且仍然显示所有的Sprite。

有人能指出我正确的方向吗？提前致谢。

...

我的朋友想出了一个解决方案... 我错过了重复属性。

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);

希望这有助于让其他人同样的问题。

来源

2013-04-16 Spolarium7

我的朋友想出了一个解决方案... 我错过了重复属性。见上面编辑说明 – Spolarium7

前段时间我有同样的问题，所以我已经写了一个完整的使用Spritesheet作为PlaneGeometry纹理的动画示例，然后定期更新纹理 - 请参阅

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

并查看注释的源代码以获取更多解释。

来源

2013-04-16 13:55:27

谢谢！做得很好。快乐的编码！ – Spolarium7

Three.js使用2D纹理\ sprite进行动画（planeGeometry）

回答

相关问题