three.js

Recientemente escribí esta pequeña librería para crear animaciones en 2D en three.js

¿Cómo funciona?

Primero creamos el material con la imagen que contiene los sprites de la animación.

  const material = new THREE.MeshPhongMaterial({
    map: texture,
    alphaTest: 0.7,
    side: THREE.DoubleSide,
  });

A continuación se crea la geometría:

const geometry = new THREE.BufferGeometry();

const positions = [ -0.5, 0.5, 0, 
                     0.5, 0.5, 0, 
                    -0.5,-0.5, 0, 
                     0.5,-0.5, 0];

geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));

geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2));

geometry.setIndex([0, 2, 1, 2, 3, 1]);
geometry.computeVertexNormals();

Creamos una malla con la geometría y el material, y lo añadimos a la escena.

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

Finalmente creamos la instancia de la animación:

 animation = new Animation(mesh.geometry, 12, 6)
 .create("run", 0, 25, 0.025)
 .create("jump", 30, 63, 0.020)
 .play("run");

En el código anterior se encadena la inicialización, de modo que al constructor se le pasa la geometría y el numero de filas y columnas que tiene la animación. Con el método ‘create’, registramos una animación, indicando el identificador, frame de inicio (índice), frame final (índice), y tiempo de duración de cada frame. Con el método play reproducimos la animación deseada (identificador).

Código Fuente:

https://github.com/sergiss/three.js-animation

Si te gustan los juegos 2D, quizá te interese: https://sergiosoriano.com/html-2d-game-engine-javascript-vanilla/