misc

controls / map

What this shows

Pan, rotate, and zoom a damped MapControls camera over a fogged city of 500 instanced flat-shaded boxes.

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

Differences from three.js

MeshPhongMaterial becomes LambertMaterial with flat shading, so the boxes 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 controls = new EASEL.MapControls(camera, canvas);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;

const geometry = new EASEL.BoxGeometry();
geometry.translate(0, 0.5, 0);
const mesh = new EASEL.InstancedMesh(
  geometry,
  new EASEL.LambertMaterial({ color: 0xeeeeee, shading: EASEL.Shading.Flat }),
  500,
);

function animate() {

  controls.update();
  renderer.prepare(scene, camera);
  renderer.render(scene, camera);
}