canvas

interactive / cubes / ortho

What this shows

Two thousand randomly colored, rotated, and scaled Lambert cubes are viewed through an orthographic camera that slowly orbits them, and the cube picked by an orthographic raycast under the pointer turns red.

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

Differences from three.js

EASEL bakes Lambert lighting per vertex (Gouraud) instead of per fragment, and it rasterizes the cubes on the CPU without anti-aliasing, so cube edges are jagged where the three.js renderer enables antialias.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const light = new EASEL.DirectionalLight(0xffffff, 3);
light.position.set(1, 1, 1).normalize();

scene.add(light);

const geometry = new EASEL.BoxGeometry();
const object = new EASEL.Mesh(
  geometry,
  new EASEL.LambertMaterial({ color: Math.random() * 0xffffff, vertexColors: false }),
);

scene.add(object);

const camera = new EASEL.OrthographicCamera({
  left: (frustumSize * aspect) / -2,
  right: (frustumSize * aspect) / 2,
  top: frustumSize / 2,
  bottom: frustumSize / -2,
  near: 0.1,
  far: 100,
});
const angle = EASEL.toRadians(theta);
camera.position.set(radius * Math.sin(angle), radius * Math.sin(angle), radius * Math.cos(angle));
camera.lookAt(scene.position);
camera.updateMatrixWorld();

const raycaster = new EASEL.Raycaster();

raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects(scene.children, false)[0];
if (hit) hit.object.material.emissive.hex = 0xff0000;

renderer.prepare(scene, camera);
renderer.render(scene, camera);