canvas

math / orientation / transform

What this shows

A cone turns toward a red target that jumps to a random point on a wireframe sphere every two seconds, using Quaternion.rotateTowards or an instant lookAt.

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

Differences from three.js

EASEL has no MeshNormalMaterial, so the cone uses a BasicMaterial whose vertex colors are recomputed each frame from its view-space vertex normals and interpolated across each face instead of per pixel.
The wireframe sphere's opacity 0.3 becomes EASEL opacity level 6 of 8, blended in EASEL's quantized color space, so single lines draw at about 89 gray on black where three.js gives about 61.
The lil-gui useLookAt checkbox becomes a select control with on and off options.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const spherical = new EASEL.Spherical();
const rotationMatrix = new EASEL.Matrix4();
const targetQuaternion = new EASEL.Quaternion();
const timer = new EASEL.Timer();

spherical.theta = Math.random() * Math.PI * 2;
spherical.phi = Math.acos(2 * Math.random() - 1);
spherical.radius = 2;
target.position.setFromSpherical(spherical);
rotationMatrix.lookAt(target.position, mesh.position, mesh.up);
targetQuaternion.setFromRotationMatrix(rotationMatrix);

function animate() {
  const delta = timer.update().delta;

  if (!mesh.quaternion.equals(targetQuaternion)) {
    mesh.quaternion.rotateTowards(targetQuaternion, (Math.PI / 2) * delta);
  }
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
}