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

about.md

npm install [email protected] --global
npm install three
texel index.js --open

Wait for output.

index.js

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

const size = 256;

let frame = 0;
const totalFrames = 100;

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, -100, 100);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor('#e57e69');
const canvas = renderer.domElement;
renderer.setPixelRatio(1);
renderer.setSize(size, size);
document.body.appendChild(renderer.domElement);

const light = new THREE.RectAreaLight('white', 5, 1, 1);
scene.add(light);
light.position.set(1, 1, 1);
light.lookAt(new THREE.Vector3());

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ metalness: 0.5, roughness: 1, color: 'hsl(0, 0%, 75%)' });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.set(1, 1, 1);
camera.lookAt(new THREE.Vector3());

const animate = () => {
  const progress = frame / totalFrames;
  cube.rotation.x = Math.PI * 1 * progress;

  light.position.set(1, 1, 1);
  light.lookAt(new THREE.Vector3());

  renderer.render(scene, camera);

  devtool.recordFrame(canvas).then(() => {
    frame++;
    if (frame < totalFrames) window.requestAnimationFrame(animate);
    else devtool.endRecord();
  });
};

devtool.beginRecord({ fps: 30, width: size, height: size, file: 'tmp/output.gif' })
  .then(animate);