Skip to content
three-flatland three-flatland

Animation

AnimatedSprite2D

The AnimatedSprite2D class extends Sprite2D with animation capabilities:

const sprite = new AnimatedSprite2D({
  texture: spritesheetTexture,
  frameWidth: 32,
  frameHeight: 32,
  frameCount: 8,
  fps: 12,
});


sprite.play();

Spritesheet Layout

Spritesheets should have frames arranged left-to-right, top-to-bottom. The frame index starts at 0 in the top-left corner.

Animation Update

For vanilla Three.js, call the update method in your animation loop:

function animate(time: number) {
  sprite.update(time);
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

Next Steps