Quick Start

This guide shows you how to create your first sprite using three-flatland.

Create a Sprite

Three.js

import { WebGPURenderer } from 'three/webgpu';
import { Scene, OrthographicCamera } from 'three';
import { Sprite2D, TextureLoader } from 'three-flatland';

async function main() {
  // Create scene and camera
  const scene = new Scene();
  const aspect = window.innerWidth / window.innerHeight;
  const camera = new OrthographicCamera(-200 * aspect, 200 * aspect, 200, -200, 0.1, 1000);
  camera.position.z = 100;

  // Create WebGPU renderer
  const renderer = new WebGPURenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  await renderer.init();

  // Load texture (presets automatically applied)
  const texture = await TextureLoader.load('/sprite.png');

  // Create sprite
  const sprite = new Sprite2D({ texture, anchor: [0.5, 0.5] });
  sprite.scale.set(100, 100, 1);
  scene.add(sprite);

  // Animation loop
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
}

main();

React

import { Suspense } from 'react';
import { Canvas, extend, useLoader } from '@react-three/fiber/webgpu';
import { Sprite2D, TextureLoader } from 'three-flatland/react';

extend({ Sprite2D });

function Sprite() {
  // Presets automatically applied (pixel-art by default)
  const texture = useLoader(TextureLoader, '/sprite.png');

  return (
    <sprite2D texture={texture} anchor={[0.5, 0.5]} scale={[100, 100, 1]} />
  );
}

export default function App() {
  return (
    <Canvas orthographic camera={{ zoom: 5, position: [0, 0, 100] }}>
      <Suspense>
        <Sprite />
      </Suspense>
    </Canvas>
  );
}

Next Steps

• Learn about sprites - Position, scale, and customize sprites
• Add animation - Animate sprites with spritesheets
• Batch rendering - Optimize for thousands of sprites
• Browse examples - Interactive code examples