javascript - Three.js 使用2D texture\sprite做动画(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);

问题是每当我偏移时，Mesh 似乎大到足以显示所有其他 Sprite(我将纹理用作 2D Sprite，我偏移以使其动画)。结果非常糟糕，我仍在研究如何控制 Mesh 的大小，以便它只显示 Sprite 的一个快照。我所有的尝试似乎只是调整网格和底层纹理的大小，并且仍然显示所有 Sprite 。

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

...

我的 friend 提出了一个解决方案... 我错过了 repeat 属性。

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

我刚才有同样的问题，所以我写了一个完整的例子，使用 spritesheet 作为 PlaneGeometry 的纹理，然后定期更新纹理——查看例子

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

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

---

更新(2021 年):

这是我推荐使用的函数的更新版本。它修复了不正确的图 block 显示顺序的问题，自动更新下一帧，并返回一个对象，您可以根据需要使用该对象停止和重新启动动画。

function TextureAnimator(texture, tilesHoriz, tilesVert, tileDispDuration) 
{ 
  let obj = {};

  obj.texture = texture;
  obj.tilesHorizontal = tilesHoriz;
  obj.tilesVertical = tilesVert;
  obj.tileDisplayDuration = tileDispDuration;

  obj.numberOfTiles = tilesHoriz * tilesVert;

  obj.texture.wrapS = THREE.RepeatWrapping;   
  obj.texture.wrapT = THREE.RepeatWrapping;   
  obj.texture.repeat.set( 1/tilesHoriz, 1/tilesVert );
  obj.currentTile = 0;

  obj.nextFrame = function()
  {
    obj.currentTile++;
    if (obj.currentTile == obj.numberOfTiles)
      obj.currentTile = 0;

    let currentColumn = obj.currentTile % obj.tilesHorizontal;
    obj.texture.offset.x = currentColumn / obj.tilesHorizontal;

    let currentRow = Math.floor( obj.currentTile / obj.tilesHorizontal );
    obj.texture.offset.y = obj.tilesVertical - currentRow / obj.tilesVertical;
  }

  obj.start = function()
  { obj.intervalID = setInterval(obj.nextFrame, obj.tileDisplayDuration); }

  obj.stop = function()
  { clearInterval(obj.intervalID); }

  obj.start();
  return obj;
}