three.js 2D Animation

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/