Using @mattdesl's Texel with Three.js (WebGL renderer)

about.md

npm install [email protected] --global
texel index.js --open
ffmpeg -framerate 24 -i tmp/%03d.png -y output.gif
ffmpeg -framerate 24 -i tmp/%03d.png -y -c:v libx264 -profile:v high -crf 20 -pix_fmt yuv420p output.mp4

index.js

import devtool from 'texel/devtool';
import * as THREE from 'three';

const size = 256;

let frame = 0;
const totalFrames = 100;
let step = 1 / totalFrames * (Math.PI * 2);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( size, size );
const canvas = renderer.domElement
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 2;

const animate = () => {
  cube.rotation.x += step;
  cube.rotation.y += step;

  renderer.render(scene, camera);

  devtool.saveCanvas(canvas, {
    output: 'tmp',
    frame: frame++,
    totalFrames
  }).then(() => {
    if (frame < totalFrames)
      window.requestAnimationFrame(animate);
  });
};

animate();