canvas

geometry / cube

What this shows

A unit box textured with the wooden crate GIF tumbles slowly around its X and Y axes.

Side by side with the three.js r186 original: webgl_geometry_cube.html

Differences from three.js

EASEL caches the 256x256 crate.gif at 128x128 and samples it nearest-neighbor with affine warping, so the wood grain is blockier and bends across each face instead of being filtered and perspective-correct.
EASEL's TextureLoader.load returns nothing, so the port assigns the map in the load callback, where it also sets colorSpace and re-caches the already decoded texels with update(); the cube draws untextured white for the first frames, before the data-URL GIF is decoded.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const camera = new EASEL.PerspectiveCamera({ fov: 70, aspect, near: 0.1, far: 100 });
camera.position.z = 2;

const material = new EASEL.BasicMaterial();
new EASEL.TextureLoader().load(crateUrl, (texture) => {
  texture.colorSpace = EASEL.SRGBColorSpace;
  texture.update().buildBrightnessLevels();
  material.map = texture;
});

const mesh = new EASEL.Mesh(new EASEL.BoxGeometry(), material);

scene.add(mesh);

mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.prepare(scene, camera);
renderer.render(scene, camera);