misc

controls / transform

What this shows

Drag the TransformControls gizmo to translate, rotate, or scale a textured crate; keys switch mode, space, snapping, camera, and gizmo size.

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

Differences from three.js

Keyboard shortcuts listen on the focused canvas instead of window, so click the canvas before pressing keys; each side of the comparison reacts only to its own keys.
The gizmo keeps the three.js handle layout, picking, and constant screen size, but draws its shafts and rotation rings as lines and its arrow cones with fewer segments so the CPU renderer stays fast.
The 256 x 256 crate texture is scaled to 128 x 128 and sampled with nearest-neighbor, affine UVs, and no anisotropic filtering.
The scene is redrawn every frame instead of only on change events.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

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


const orbit = new EASEL.OrbitControls(camera, canvas);
const control = new EASEL.TransformControls(camera, canvas);
control.addEventListener("dragging-changed", (event) => {
  orbit.enabled = !event.value;
});

const mesh = new EASEL.Mesh(
  new EASEL.BoxGeometry(1, 1, 1),
  new EASEL.LambertMaterial({ color: 0xffffff, vertexColors: false }),
);

scene.add(mesh);
control.attach(mesh);

scene.add(control.helper);

canvas.addEventListener("keydown", (event) => {

  if (event.key === "e") control.mode = "rotate";
  if (event.key === "Shift") control.rotationSnap = EASEL.toRadians(15);
});