Interaction Tools

Orthographic Blueprint

What this shows

Pan and zoom a layered floor plan with openings, fixtures, and dimensions.

This example needs a Canvas2D-capable browser.

Loading scene…

Loading scene…

Key API excerpt

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

const camera = new EASEL.OrthographicCamera({ left, right, top, bottom });

const controls = new EASEL.MapControls(camera, canvas);
controls.enableRotate = false;
controls.minZoom = 0.7;
controls.maxZoom = 4;

scene.add(walls, openings, fixtures, dimensions);