misc

controls / orbit

What this shows

Orbit, zoom, and pan a damped OrbitControls camera over a fogged field of 500 instanced flat-shaded cones.

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

Differences from three.js

MeshPhongMaterial becomes LambertMaterial with flat shading, so the cones have no specular highlights.
EASEL FogExp2 evaluates fog per vertex from a lookup table, so the fog fades across each face instead of per pixel.

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);
orbit.listenToKeyEvents(canvas);
orbit.enableDamping = true;
orbit.dampingFactor = 0.05;
orbit.screenSpacePanning = false;
orbit.minDistance = 100;
orbit.maxDistance = 500;
orbit.cursorStyle = "grab";
orbit.maxPolarAngle = Math.PI / 2;

const mesh = new EASEL.InstancedMesh(
  new EASEL.ConeGeometry(10, 30, 4, 1),
  new EASEL.LambertMaterial({ color: 0xffffff, shading: EASEL.Shading.Flat }),
  500,
);

function animate() {
  orbit.update();
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
}