diff --git a/scripts/build-area.js b/scripts/build-area.js
index 0567e65..e1e422f 100755
--- a/scripts/build-area.js
+++ b/scripts/build-area.js
@@ -649,7 +649,7 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, areaId) {
       const scratchNorth = new Cesium.Cartesian3();
       const scratchUp = new Cesium.Cartesian3();
       const offset = new Cesium.Cartesian3();
-      const state = { enabled: false };
+      const state = { enabled: false, distance: 36.0, height: 18.0 };
 
       function update(clock) {
         const time = clock.currentTime;
@@ -679,7 +679,7 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, areaId) {
         const eastComponent = Cesium.Cartesian3.dot(scratchDirection, scratchEast);
         const northComponent = Cesium.Cartesian3.dot(scratchDirection, scratchNorth);
         const heading = Math.atan2(eastComponent, northComponent);
-        Cesium.Cartesian3.fromElements(0.0, -36.0, 18.0, offset);
+        Cesium.Cartesian3.fromElements(0.0, -state.distance, state.height, offset);
         const transform = Cesium.Transforms.headingPitchRollToFixedFrame(
           position,
           new Cesium.HeadingPitchRoll(heading, 0.0, 0.0)
@@ -687,6 +687,15 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, areaId) {
         viewer.camera.lookAtTransform(transform, offset);
       }
 
+      function onWheel(event) {
+        if (!state.enabled) return;
+        event.preventDefault();
+        const zoom = event.deltaY > 0 ? 1.12 : 0.88;
+        state.distance = Cesium.Math.clamp(state.distance * zoom, 12.0, 160.0);
+        state.height = Cesium.Math.clamp(state.height * zoom, 6.0, 90.0);
+        update(viewer.clock);
+      }
+
       return {
         get enabled() {
           return state.enabled;
@@ -695,6 +704,7 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, areaId) {
           if (state.enabled) return;
           state.enabled = true;
           viewer.trackedEntity = undefined;
+          viewer.canvas.addEventListener("wheel", onWheel, { passive: false });
           viewer.clock.onTick.addEventListener(update);
           update(viewer.clock);
         },
@@ -702,6 +712,7 @@ function cesiumPreviewHtml(glbName, metadataName, routeName, areaId) {
           if (!state.enabled) return;
           state.enabled = false;
           viewer.clock.onTick.removeEventListener(update);
+          viewer.canvas.removeEventListener("wheel", onWheel);
           viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
         }
       };