@inweb/viewer-three 26.9.1 → 26.9.3

package/dist/viewer-three.module.js

@@ -2,7 +2,7 @@ import { draggersRegistry, commandsRegistry, componentsRegistry, Loader, loaders
 
 export * from "@inweb/viewer-core";
 
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, Sphere, MathUtils, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from "three";
+import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Matrix4, Vector4, Raycaster, Controls, Clock, MathUtils, Sphere, Box3, Color, AmbientLight, DirectionalLight, HemisphereLight, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, EdgesGeometry, OrthographicCamera, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, LoadingManager, LoaderUtils, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, PerspectiveCamera, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from "three";
 
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
@@ -785,6 +785,13 @@ class OrbitDragger {
             this.viewer.target.copy(this.orbit.target);
             this.viewer.update();
             switch (this.orbit.state) {
+              case STATE.ROTATE:
+              case STATE.TOUCH_ROTATE:
+                this.viewer.emitEvent({
+                    type: "orbit"
+                });
+                break;
+
               case STATE.PAN:
               case STATE.TOUCH_PAN:
                 this.viewer.emitEvent({
@@ -805,6 +812,9 @@ class OrbitDragger {
                 });
                 break;
             }
+            this.viewer.emitEvent({
+                type: "changecamera"
+            });
             this.changed = true;
         };
         this.stopContextMenu = event => {
@@ -1039,7 +1049,7 @@ class MeasureSnapper {
     }
     update(scene) {
         this.objects = [];
-        scene.traverseVisible((child => this.objects.push(child)));
+        scene.traverseVisible(child => this.objects.push(child));
     }
 }
 
@@ -1072,21 +1082,21 @@ class MeasureOverlay {
         this.container = undefined;
     }
     clear() {
-        this.lines.forEach((line => line.dispose()));
+        this.lines.forEach(line => line.dispose());
         this.lines = [];
     }
     render() {
         this.projector.updateProjectionMatrix();
-        this.lines.forEach((line => line.render()));
+        this.lines.forEach(line => line.render());
     }
     update() {
-        this.lines.forEach((line => line.update()));
+        this.lines.forEach(line => line.update());
     }
     addLine(line) {
         this.lines.push(line);
     }
     removeLine(line) {
-        this.lines = this.lines.filter((x => x !== line));
+        this.lines = this.lines.filter(x => x !== line);
     }
 }
 
@@ -1294,6 +1304,282 @@ class PanDragger extends OrbitDragger {
 }
 
 class WalkControls extends Controls {
+    constructor(camera, canvas, groundObjects, viewer) {
+        super(camera, canvas);
+        this.EYE_HEIGHT = 1.7;
+        this.FAILING_DISTANCE = 2;
+        this.GROUND_FOLLOWING_SPEED = .05;
+        this.LOOK_SPEED = .1;
+        this.WALK_SPEED_DELIMITER = 4;
+        this.WHEEL_SPEED_DELIMITER = 15e3;
+        this.movementSpeed = .1;
+        this.multiplier = 3;
+        this.moveWheel = 0;
+        this.mouseDragOn = false;
+        this.onPointerDown = event => {
+            if (event.button !== 0) return;
+            this.domElement.setPointerCapture(event.pointerId);
+            this.downPosition.set(event.clientX, event.clientY);
+            this.quaternion.copy(this.object.quaternion);
+            this.mouseDragOn = true;
+        };
+        this.onPointerMove = event => {
+            if (!this.mouseDragOn) return;
+            const movePosition = new Vector2(event.clientX, event.clientY);
+            if (this.downPosition.distanceTo(movePosition) === 0) return;
+            this.rotateDelta.copy(this.downPosition).sub(movePosition);
+            this.rotateCamera(this.rotateDelta);
+            this.dispatchEvent({
+                type: "change"
+            });
+        };
+        this.onPointerUp = event => {
+            this.domElement.releasePointerCapture(event.pointerId);
+            this.mouseDragOn = false;
+        };
+        this.onPointerCancel = event => {
+            this.domElement.dispatchEvent(new PointerEvent("pointerup", event));
+        };
+        this.onWheel = event => {
+            this.moveWheel = event.deltaY;
+            this.update();
+        };
+        this.onKeyDown = event => {
+            switch (event.code) {
+              case "NumpadSubtract":
+              case "Minus":
+                if (this.multiplier > 1) {
+                    this.multiplier = this.multiplier - 1;
+                    this.dispatchEvent({
+                        type: "walkspeedchange",
+                        data: this.multiplier
+                    });
+                }
+                break;
+
+              case "NumpadAdd":
+              case "Equal":
+                if (this.multiplier < 10) {
+                    this.multiplier = this.multiplier + 1;
+                    this.dispatchEvent({
+                        type: "walkspeedchange",
+                        data: this.multiplier
+                    });
+                }
+                break;
+
+              case "ArrowLeft":
+              case "ArrowRight":
+              case "ArrowUp":
+              case "ArrowDown":
+              case "KeyW":
+              case "KeyS":
+              case "KeyA":
+              case "KeyD":
+              case "KeyQ":
+              case "KeyE":
+                this.moveKeys.add(event.code);
+                this.update();
+                break;
+            }
+        };
+        this.onKeyUp = event => {
+            if (this.moveKeys.delete(event.code)) this.update();
+        };
+        this.initHighlighter = () => {
+            this.highlighter = this.viewer.getComponent("HighlighterComponent");
+        };
+        this.camera = camera;
+        this.viewer = viewer;
+        this.groundObjects = groundObjects;
+        this.raycaster = new Raycaster;
+        this.raycaster.near = 0;
+        this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+        this.moveKeys = new Set;
+        this.moveClock = new Clock;
+        this.quaternion = camera.quaternion.clone();
+        this.downPosition = new Vector2(0, 0);
+        this.rotateDelta = new Vector2(0, 0);
+        this.domElement.addEventListener("pointerdown", this.onPointerDown);
+        this.domElement.addEventListener("pointermove", this.onPointerMove);
+        this.domElement.addEventListener("pointerup", this.onPointerUp);
+        this.domElement.addEventListener("pointercancel", this.onPointerCancel);
+        this.domElement.addEventListener("wheel", this.onWheel);
+        window.addEventListener("keydown", this.onKeyDown);
+        window.addEventListener("keyup", this.onKeyUp);
+    }
+    dispose() {
+        this.domElement.removeEventListener("pointerdown", this.onPointerDown);
+        this.domElement.removeEventListener("pointermove", this.onPointerMove);
+        this.domElement.removeEventListener("pointerup", this.onPointerUp);
+        this.domElement.removeEventListener("pointercancel", this.onPointerCancel);
+        this.domElement.removeEventListener("wheel", this.onWheel);
+        window.removeEventListener("keydown", this.onKeyDown);
+        window.removeEventListener("keyup", this.onKeyUp);
+        super.dispose();
+    }
+    updateGroundFollowing() {
+        this.raycaster.set(this.object.position, new Vector3(0, -1, 0));
+        this.raycaster.params = this.raycaster.params = {
+            Mesh: {},
+            Line: {
+                threshold: 0
+            },
+            Line2: {
+                threshold: 0
+            },
+            LOD: {
+                threshold: 0
+            },
+            Points: {
+                threshold: 0
+            },
+            Sprite: {
+                threshold: 0
+            }
+        };
+        let intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+        if (intersects.length > 0) {
+            const groundY = intersects[0].point.y;
+            const targetY = groundY + this.EYE_HEIGHT;
+            this.object.position.y = MathUtils.lerp(this.object.position.y, targetY, this.GROUND_FOLLOWING_SPEED);
+        }
+    }
+    select(objects, model) {
+        if (!model) {
+            this.viewer.models.forEach(model => this.select(objects, model));
+            return;
+        }
+        if (!Array.isArray(objects)) objects = [ objects ];
+        if (!objects.length) return;
+        model.showOriginalObjects(objects);
+        this.highlighter.highlight(objects);
+        objects.forEach(object => this.viewer.selected.push(object));
+        objects.forEach(object => object.isSelected = true);
+    }
+    update() {
+        let moved = false;
+        let upgradeGroundFollowing = false;
+        const forward = new Vector3;
+        const sideways = new Vector3;
+        if (this.moveKeys.size > 0) {
+            upgradeGroundFollowing = true;
+            const timeDelta = this.moveClock.getDelta();
+            const moveDelta = timeDelta * this.multiplier * this.movementSpeed / this.WALK_SPEED_DELIMITER;
+            this.object.getWorldDirection(forward);
+            forward.y = 0;
+            forward.normalize();
+            sideways.setFromMatrixColumn(this.object.matrix, 0);
+            sideways.y = 0;
+            sideways.normalize();
+            if (this.moveKeys.has("KeyW")) {
+                this.object.position.addScaledVector(forward, moveDelta);
+            }
+            if (this.moveKeys.has("KeyS")) {
+                this.object.position.addScaledVector(forward, -moveDelta);
+            }
+            if (this.moveKeys.has("KeyA")) {
+                this.object.position.addScaledVector(sideways, -moveDelta);
+            }
+            if (this.moveKeys.has("KeyD")) {
+                this.object.position.addScaledVector(sideways, moveDelta);
+            }
+            if (this.moveKeys.has("KeyQ")) {
+                this.object.translateY(moveDelta);
+                upgradeGroundFollowing = false;
+            }
+            if (this.moveKeys.has("KeyE")) {
+                this.object.translateY(-moveDelta);
+                upgradeGroundFollowing = false;
+            }
+            const lookDelta = this.LOOK_SPEED + (this.multiplier - 1);
+            if (this.moveKeys.has("ArrowUp")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, -lookDelta / 2)));
+            if (this.moveKeys.has("ArrowDown")) this.rotateCamera(this.rotateDelta.add(new Vector2(0, lookDelta / 2)));
+            if (this.moveKeys.has("ArrowLeft")) this.rotateCamera(this.rotateDelta.add(new Vector2(lookDelta, 0)));
+            if (this.moveKeys.has("ArrowRight")) this.rotateCamera(this.rotateDelta.add(new Vector2(-lookDelta, 0)));
+            this.moveWheel = 0;
+            moved = true;
+        }
+        if (this.moveWheel !== 0) {
+            const moveDelta = this.moveWheel * this.multiplier * this.movementSpeed / this.WHEEL_SPEED_DELIMITER;
+            this.object.getWorldDirection(forward);
+            forward.y = 0;
+            forward.normalize();
+            this.object.position.addScaledVector(forward, -moveDelta);
+            this.moveWheel += -1 * Math.sign(this.moveWheel);
+            moved = true;
+        }
+        if (upgradeGroundFollowing) this.updateGroundFollowing();
+        if (moved) {
+            this.dispatchEvent({
+                type: "change"
+            });
+        }
+        if (this.moveKeys.size === 0 && this.moveWheel === 0) {
+            this.moveClock.stop();
+            this.moveClock.autoStart = true;
+        }
+    }
+    rotateCamera(delta) {
+        const rotateX = Math.PI * delta.x / this.domElement.clientWidth;
+        const rotateY = Math.PI * delta.y / this.domElement.clientHeight;
+        const xRotation = new Quaternion;
+        xRotation.setFromAxisAngle(this.object.up, rotateX);
+        const yRotation = new Quaternion;
+        yRotation.setFromAxisAngle(new Vector3(1, 0, 0), rotateY);
+        const quaternion = this.quaternion.clone();
+        quaternion.premultiply(xRotation).multiply(yRotation).normalize();
+        this.object.setRotationFromQuaternion(quaternion);
+    }
+}
+
+class WalkDragger {
+    constructor(viewer) {
+        this.updateControls = () => {
+            const size = this.viewer.extents.getSize(new Vector3);
+            this.controls.movementSpeed = Math.min(size.x, size.y, size.z) / 2;
+        };
+        this.controlsChange = () => {
+            this.viewer.update();
+            this.viewer.emitEvent({
+                type: "changecamera"
+            });
+        };
+        this.walkspeedChange = event => {
+            this.viewer.emitEvent(event);
+        };
+        this.viewerRender = () => {
+            this.controls.update();
+        };
+        this.viewerZoom = () => {
+            this.controls.rotateDelta.set(0, 0);
+        };
+        const meshOnlyGround = [];
+        viewer.models[0].getObjects().forEach(obj => {
+            obj.traverse(child => {
+                if (child instanceof Mesh) {
+                    meshOnlyGround.push(child);
+                }
+            });
+        });
+        this.controls = new WalkControls(viewer.camera, viewer.canvas, meshOnlyGround, viewer);
+        this.controls.addEventListener("change", this.controlsChange);
+        this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+        this.viewer = viewer;
+        this.viewer.on("render", this.viewerRender);
+        this.viewer.on("zoom", this.viewerZoom);
+        this.updateControls();
+    }
+    dispose() {
+        this.viewer.off("render", this.viewerRender);
+        this.viewer.off("zoom", this.viewerZoom);
+        this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+        this.controls.removeEventListener("change", this.controlsChange);
+        this.controls.dispose();
+    }
+}
+
+class FlyControls extends Controls {
     constructor(camera, canvas) {
         super(camera, canvas);
         this.movementSpeed = .2;
@@ -1336,7 +1622,7 @@ class WalkControls extends Controls {
                 if (this.multiplier > 1) {
                     this.multiplier = this.multiplier - 1;
                     this.dispatchEvent({
-                        type: "walkspeedchange",
+                        type: "flyspeedchange",
                         data: this.multiplier
                     });
                 }
@@ -1347,7 +1633,7 @@ class WalkControls extends Controls {
                 if (this.multiplier < 10) {
                     this.multiplier = this.multiplier + 1;
                     this.dispatchEvent({
-                        type: "walkspeedchange",
+                        type: "flyspeedchange",
                         data: this.multiplier
                     });
                 }
@@ -1440,7 +1726,7 @@ class WalkControls extends Controls {
     }
 }
 
-class WalkDragger {
+class FlyDragger {
     constructor(viewer) {
         this.updateControls = () => {
             const size = this.viewer.extents.getSize(new Vector3);
@@ -1448,8 +1734,11 @@ class WalkDragger {
         };
         this.controlsChange = () => {
             this.viewer.update();
+            this.viewer.emitEvent({
+                type: "changecamera"
+            });
         };
-        this.walkspeedChange = event => {
+        this.flyspeedChange = event => {
             this.viewer.emitEvent(event);
         };
         this.viewerRender = () => {
@@ -1458,9 +1747,9 @@ class WalkDragger {
         this.viewerZoom = () => {
             this.controls.rotateDelta.set(0, 0);
         };
-        this.controls = new WalkControls(viewer.camera, viewer.canvas);
+        this.controls = new FlyControls(viewer.camera, viewer.canvas);
         this.controls.addEventListener("change", this.controlsChange);
-        this.controls.addEventListener("walkspeedchange", this.walkspeedChange);
+        this.controls.addEventListener("flyspeedchange", this.flyspeedChange);
         this.viewer = viewer;
         this.viewer.on("render", this.viewerRender);
         this.viewer.on("zoom", this.viewerZoom);
@@ -1469,7 +1758,7 @@ class WalkDragger {
     dispose() {
         this.viewer.off("render", this.viewerRender);
         this.viewer.off("zoom", this.viewerZoom);
-        this.controls.removeEventListener("walkspeedchange", this.walkspeedChange);
+        this.controls.removeEventListener("flyspeedchange", this.flyspeedChange);
         this.controls.removeEventListener("change", this.controlsChange);
         this.controls.dispose();
     }
@@ -1488,21 +1777,23 @@ class ZoomDragger extends OrbitDragger {
 
 const draggers = draggersRegistry("threejs");
 
-draggers.registerDragger("Pan", (viewer => new PanDragger(viewer)));
+draggers.registerDragger("Pan", viewer => new PanDragger(viewer));
 
-draggers.registerDragger("Orbit", (viewer => new OrbitDragger(viewer)));
+draggers.registerDragger("Orbit", viewer => new OrbitDragger(viewer));
 
-draggers.registerDragger("Zoom", (viewer => new ZoomDragger(viewer)));
+draggers.registerDragger("Zoom", viewer => new ZoomDragger(viewer));
 
-draggers.registerDragger("MeasureLine", (viewer => new MeasureLineDragger(viewer)));
+draggers.registerDragger("MeasureLine", viewer => new MeasureLineDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneXAxis", (viewer => new CuttingPlaneXAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneXAxis", viewer => new CuttingPlaneXAxisDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneYAxis", (viewer => new CuttingPlaneYAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneYAxis", viewer => new CuttingPlaneYAxisDragger(viewer));
 
-draggers.registerDragger("CuttingPlaneZAxis", (viewer => new CuttingPlaneZAxisDragger(viewer)));
+draggers.registerDragger("CuttingPlaneZAxis", viewer => new CuttingPlaneZAxisDragger(viewer));
 
-draggers.registerDragger("Walk", (viewer => new WalkDragger(viewer)));
+draggers.registerDragger("Walk", viewer => new WalkDragger(viewer));
+
+draggers.registerDragger("Fly", viewer => new FlyDragger(viewer));
 
 function applyModelTransform(viewer, model) {
     console.warn("applyModelTransform not implemented");
@@ -1533,7 +1824,7 @@ function createPreview(viewer, type = "image/jpeg", encoderOptions = .25) {
 }
 
 function explode(viewer, index = 0) {
-    viewer.models.forEach((model => model.explode(index)));
+    viewer.models.forEach(model => model.explode(index));
     viewer.update();
     viewer.emitEvent({
         type: "explode",
@@ -1614,17 +1905,17 @@ function getDefaultViewPositions() {
 }
 
 function getModels(viewer) {
-    return viewer.models.map((model => model.handle));
+    return viewer.models.map(model => model.handle);
 }
 
 function getSelected(viewer) {
     const handles = [];
-    viewer.models.forEach((model => handles.push(...model.getHandlesByObjects(viewer.selected))));
+    viewer.models.forEach(model => handles.push(...model.getHandlesByObjects(viewer.selected)));
     return handles;
 }
 
 function hideSelected(viewer) {
-    viewer.models.forEach((model => model.hideObjects(viewer.selected)));
+    viewer.models.forEach(model => model.hideObjects(viewer.selected));
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
     viewer.update();
@@ -1639,7 +1930,7 @@ function hideSelected(viewer) {
 }
 
 function isolateSelected(viewer) {
-    viewer.models.forEach((model => model.isolateObjects(viewer.selected)));
+    viewer.models.forEach(model => model.isolateObjects(viewer.selected));
     viewer.update();
     viewer.emitEvent({
         type: "isolate"
@@ -1670,7 +1961,7 @@ function resetView(viewer) {
 function selectModel(viewer, handle) {
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
-    viewer.models.filter((model => model.handle === handle)).forEach((model => selection.select(model.getObjects(), model)));
+    viewer.models.filter(model => model.handle === handle).forEach(model => selection.select(model.getObjects(), model));
     viewer.update();
     viewer.emit({
         type: "select",
@@ -1689,11 +1980,11 @@ function setMarkupColor(viewer, r = 255, g = 0, b = 0) {
 function setSelected(viewer, handles = []) {
     const selection = viewer.getComponent("SelectionComponent");
     selection.clearSelection();
-    viewer.models.forEach((model => {
+    viewer.models.forEach(model => {
         const objects = model.getObjectsByHandles(handles);
         model.showObjects(objects);
         selection.select(objects, model);
-    }));
+    });
     viewer.update();
     viewer.emitEvent({
         type: "show"
@@ -1706,7 +1997,7 @@ function setSelected(viewer, handles = []) {
 }
 
 function showAll(viewer) {
-    viewer.models.forEach((model => model.showAllObjects()));
+    viewer.models.forEach(model => model.showAllObjects());
     viewer.update();
     viewer.emitEvent({
         type: "showall"
@@ -1720,17 +2011,17 @@ function zoomToExtents(viewer) {
 function zoomToObjects(viewer, handles = []) {
     const handleSet = new Set(handles);
     const objects = [];
-    viewer.scene.traverseVisible((child => {
+    viewer.scene.traverseVisible(child => {
         var _a;
-        if (handleSet.has((_a = child.userData) === null || _a === undefined ? undefined : _a.handle)) objects.push(child);
-    }));
-    const extents = objects.reduce(((result, object) => result.expandByObject(object)), new Box3);
+        if (handleSet.has((_a = child.userData) === null || _a === void 0 ? void 0 : _a.handle)) objects.push(child);
+    });
+    const extents = objects.reduce((result, object) => result.expandByObject(object), new Box3);
     if (extents.isEmpty()) extents.copy(viewer.extents);
     zoomTo(viewer, extents);
 }
 
 function zoomToSelected(viewer) {
-    const extents = viewer.selected.reduce(((result, object) => result.expandByObject(object)), new Box3);
+    const extents = viewer.selected.reduce((result, object) => result.expandByObject(object), new Box3);
     if (extents.isEmpty()) extents.copy(viewer.extents);
     zoomTo(viewer, extents);
 }
@@ -1783,25 +2074,25 @@ commands.registerCommand("zoomToObjects", zoomToObjects);
 
 commands.registerCommand("zoomToSelected", zoomToSelected);
 
-commands.registerCommand("top", (viewer => setDefaultViewPosition(viewer, "top")));
+commands.registerCommand("top", viewer => setDefaultViewPosition(viewer, "top"));
 
-commands.registerCommand("bottom", (viewer => setDefaultViewPosition(viewer, "bottom")));
+commands.registerCommand("bottom", viewer => setDefaultViewPosition(viewer, "bottom"));
 
-commands.registerCommand("left", (viewer => setDefaultViewPosition(viewer, "left")));
+commands.registerCommand("left", viewer => setDefaultViewPosition(viewer, "left"));
 
-commands.registerCommand("right", (viewer => setDefaultViewPosition(viewer, "right")));
+commands.registerCommand("right", viewer => setDefaultViewPosition(viewer, "right"));
 
-commands.registerCommand("front", (viewer => setDefaultViewPosition(viewer, "front")));
+commands.registerCommand("front", viewer => setDefaultViewPosition(viewer, "front"));
 
-commands.registerCommand("back", (viewer => setDefaultViewPosition(viewer, "back")));
+commands.registerCommand("back", viewer => setDefaultViewPosition(viewer, "back"));
 
-commands.registerCommand("sw", (viewer => setDefaultViewPosition(viewer, "sw")));
+commands.registerCommand("sw", viewer => setDefaultViewPosition(viewer, "sw"));
 
-commands.registerCommand("se", (viewer => setDefaultViewPosition(viewer, "se")));
+commands.registerCommand("se", viewer => setDefaultViewPosition(viewer, "se"));
 
-commands.registerCommand("ne", (viewer => setDefaultViewPosition(viewer, "ne")));
+commands.registerCommand("ne", viewer => setDefaultViewPosition(viewer, "ne"));
 
-commands.registerCommand("nw", (viewer => setDefaultViewPosition(viewer, "nw")));
+commands.registerCommand("nw", viewer => setDefaultViewPosition(viewer, "nw"));
 
 commands.registerCommandAlias("clearMarkup", "clearOverlay");
 
@@ -1854,9 +2145,9 @@ class CameraComponent {
             const rendererSize = this.viewer.renderer.getSize(new Vector2);
             const aspect = rendererSize.x / rendererSize.y;
             let camera;
-            this.viewer.scene.traverse((object => {
+            this.viewer.scene.traverse(object => {
                 if (object.isCamera) if (!camera) camera = object; else if (object.isPerspectiveCamera && camera.isOrthographicCamera) camera = object;
-            }));
+            });
             if (camera) {
                 camera.isDefaultCamera = true;
                 camera.scale.set(1, 1, 1);
@@ -1896,9 +2187,9 @@ class ExtentsComponent {
     constructor(viewer) {
         this.syncExtents = () => {
             const extents = new Box3;
-            this.viewer.models.forEach((model => model.getExtents(extents)));
+            this.viewer.models.forEach(model => model.getExtents(extents));
             this.viewer.extents.copy(extents);
-            extents.getCenter(this.viewer.target);
+            this.viewer.extents.getCenter(this.viewer.target);
         };
         this.viewer = viewer;
         this.viewer.addEventListener("databasechunk", this.syncExtents);
@@ -1990,25 +2281,7 @@ class ResizeCanvasComponent {
         this.resizeViewer = entries => {
             const {width: width, height: height} = entries[0].contentRect;
             if (!width || !height) return;
-            const camera = this.viewer.camera;
-            const aspect = width / height;
-            if (camera.isPerspectiveCamera) {
-                camera.aspect = aspect;
-                camera.updateProjectionMatrix();
-            }
-            if (camera.isOrthographicCamera) {
-                camera.left = camera.bottom * aspect;
-                camera.right = camera.top * aspect;
-                camera.updateProjectionMatrix();
-            }
-            this.viewer.renderer.setSize(width, height, true);
-            this.viewer.composer.setSize(width, height);
-            this.viewer.update(true);
-            this.viewer.emitEvent({
-                type: "resize",
-                width: width,
-                height: height
-            });
+            this.viewer.setSize(width, height);
         };
         this.viewer = viewer;
         this.resizeObserver = new ResizeObserver(this.resizeViewer);
@@ -2124,7 +2397,7 @@ class HighlighterComponent {
         const {edgesVisibility: edgesVisibility} = this.viewer.options;
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
-        objects.filter((object => !object.userData.isEdge)).forEach((object => {
+        objects.filter(object => !object.userData.isEdge).forEach(object => {
             if (object.isHighlighted) return;
             if (object.isLine || object.isLineSegments) {
                 const positions = object.geometry.attributes.position.array;
@@ -2154,19 +2427,19 @@ class HighlighterComponent {
                 object.material = this.facesMaterial;
                 object.isHighlighted = true;
             }
-        }));
+        });
     }
     unhighlight(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
-        objects.forEach((object => {
+        objects.forEach(object => {
             if (!object.isHighlighted) return;
             object.isHighlighted = false;
             object.material = object.userData.originalMaterial;
             object.userData.highlightWireframe.removeFromParent();
             delete object.userData.originalMaterial;
             delete object.userData.highlightWireframe;
-        }));
+        });
     }
     syncHighlightColors() {
         const {facesColor: facesColor, facesTransparancy: facesTransparancy, facesOverlap: facesOverlap} = this.viewer.options;
@@ -2182,16 +2455,16 @@ class HighlighterComponent {
         this.lineGlowMaterial.color.setRGB(edgesColor.r / 255, edgesColor.g / 255, edgesColor.b / 255);
         this.lineGlowMaterial.depthTest = !edgesOverlap;
         this.lineGlowMaterial.depthWrite = !edgesOverlap;
-        this.viewer.selected.forEach((selected => {
+        this.viewer.selected.forEach(selected => {
             const wireframe = selected.userData.highlightWireframe;
             if (wireframe) wireframe.visible = edgesVisibility;
-        }));
+        });
     }
     viewerResize(event) {
         var _a, _b, _c;
-        (_a = this.renderTarget) === null || _a === undefined ? undefined : _a.setSize(event.width, event.height);
-        (_b = this.edgesMaterial) === null || _b === undefined ? undefined : _b.resolution.set(event.width, event.height);
-        (_c = this.lineGlowMaterial) === null || _c === undefined ? undefined : _c.resolution.set(event.width, event.height);
+        (_a = this.renderTarget) === null || _a === void 0 ? void 0 : _a.setSize(event.width, event.height);
+        (_b = this.edgesMaterial) === null || _b === void 0 ? void 0 : _b.resolution.set(event.width, event.height);
+        (_c = this.lineGlowMaterial) === null || _c === void 0 ? void 0 : _c.resolution.set(event.width, event.height);
     }
 }
 
@@ -2206,15 +2479,15 @@ class SelectionComponent {
             const upPosition = this.getMousePosition(event, new Vector2);
             if (upPosition.distanceTo(this.downPosition) !== 0) return;
             let intersections = [];
-            this.viewer.models.forEach((model => {
+            this.viewer.models.forEach(model => {
                 const objects = model.getVisibleObjects();
                 const intersects = this.getPointerIntersects(upPosition, objects);
                 if (intersects.length > 0) intersections.push({
                     ...intersects[0],
                     model: model
                 });
-            }));
-            intersections = intersections.sort(((a, b) => a.distance - b.distance));
+            });
+            intersections = intersections.sort((a, b) => a.distance - b.distance);
             if (!event.shiftKey) this.clearSelection();
             if (intersections.length > 0) {
                 const model = intersections[0].model;
@@ -2277,27 +2550,27 @@ class SelectionComponent {
     }
     select(objects, model) {
         if (!model) {
-            this.viewer.models.forEach((model => this.select(objects, model)));
+            this.viewer.models.forEach(model => this.select(objects, model));
             return;
         }
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
         model.showOriginalObjects(objects);
         this.highlighter.highlight(objects);
-        objects.forEach((object => this.viewer.selected.push(object)));
-        objects.forEach((object => object.isSelected = true));
+        objects.forEach(object => this.viewer.selected.push(object));
+        objects.forEach(object => object.isSelected = true);
     }
     deselect(objects, model) {
         if (!model) {
-            this.viewer.models.forEach((model => this.select(objects, model)));
+            this.viewer.models.forEach(model => this.select(objects, model));
             return;
         }
         if (!Array.isArray(objects)) objects = [ objects ];
         if (!objects.length) return;
         this.highlighter.unhighlight(objects);
         model.hideOriginalObjects(objects);
-        this.viewer.selected = this.viewer.selected.filter((x => !objects.includes(x)));
-        objects.forEach((object => object.isSelected = false));
+        this.viewer.selected = this.viewer.selected.filter(x => !objects.includes(x));
+        objects.forEach(object => object.isSelected = false);
     }
     toggleSelection(objects, model) {
         if (!Array.isArray(objects)) objects = [ objects ];
@@ -2307,8 +2580,8 @@ class SelectionComponent {
     clearSelection() {
         if (!this.viewer.selected.length) return;
         this.highlighter.unhighlight(this.viewer.selected);
-        this.viewer.models.forEach((model => model.hideOriginalObjects(this.viewer.selected)));
-        this.viewer.selected.forEach((object => object.isSelected = false));
+        this.viewer.models.forEach(model => model.hideOriginalObjects(this.viewer.selected));
+        this.viewer.selected.forEach(object => object.isSelected = false);
         this.viewer.selected.length = 0;
     }
 }
@@ -2322,15 +2595,15 @@ class WCSHelper extends Object3D {
         this.orthoCamera.position.set(0, 0, 2);
         const matRed = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#aa0000"
+            color: "#dd0000"
         });
         const matGreen = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#00aa00"
+            color: "#00dd00"
         });
         const matBlue = new MeshBasicMaterial({
             toneMapped: false,
-            color: "#0000aa"
+            color: "#0000dd"
         });
         const spriteRed = this.getSpriteMaterial(matRed.color, "X");
         const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");
@@ -2344,8 +2617,8 @@ class WCSHelper extends Object3D {
             Y: [ [ new Mesh(arrowGeometry, matGreen), [ 0, .5, 0 ], null ], [ new Mesh(lineGeometry, matGreen), null, null ], [ new Sprite(spriteGreen), [ 0, 1.55, 0 ] ] ],
             Z: [ [ new Mesh(arrowGeometry, matBlue), [ 0, 0, .5 ], [ Math.PI / 2, 0, 0 ] ], [ new Mesh(lineGeometry, matBlue), null, [ Math.PI / 2, 0, 0 ] ], [ new Sprite(spriteBlue), [ 0, 0, 1.55 ] ] ]
         };
-        Object.keys(axesMap).forEach((key => {
-            axesMap[key].forEach((objects => {
+        Object.keys(axesMap).forEach(key => {
+            axesMap[key].forEach(objects => {
                 const object = objects[0];
                 const position = objects[1];
                 const rotation = objects[2];
@@ -2354,14 +2627,14 @@ class WCSHelper extends Object3D {
                 if (rotation) object.rotation.set(rotation[0], rotation[1], rotation[2]);
                 object.updateMatrixWorld();
                 this.add(object);
-            }));
-        }));
+            });
+        });
     }
     dispose() {
-        this.traverse((object => {
+        this.traverse(object => {
             if (object.geometry) object.geometry.dispose();
             if (object.material) object.material.dispose();
-        }));
+        });
     }
     getSpriteMaterial(color, text) {
         const canvas = document.createElement("canvas");
@@ -2423,23 +2696,23 @@ class WCSHelperComponent {
 
 const components = componentsRegistry("threejs");
 
-components.registerComponent("ExtentsComponent", (viewer => new ExtentsComponent(viewer)));
+components.registerComponent("ExtentsComponent", viewer => new ExtentsComponent(viewer));
 
-components.registerComponent("CameraComponent", (viewer => new CameraComponent(viewer)));
+components.registerComponent("CameraComponent", viewer => new CameraComponent(viewer));
 
-components.registerComponent("BackgroundComponent", (viewer => new BackgroundComponent(viewer)));
+components.registerComponent("BackgroundComponent", viewer => new BackgroundComponent(viewer));
 
-components.registerComponent("LightComponent", (viewer => new LightComponent(viewer)));
+components.registerComponent("LightComponent", viewer => new LightComponent(viewer));
 
-components.registerComponent("ResizeCanvasComponent", (viewer => new ResizeCanvasComponent(viewer)));
+components.registerComponent("ResizeCanvasComponent", viewer => new ResizeCanvasComponent(viewer));
 
-components.registerComponent("RenderLoopComponent", (viewer => new RenderLoopComponent(viewer)));
+components.registerComponent("RenderLoopComponent", viewer => new RenderLoopComponent(viewer));
 
-components.registerComponent("HighlighterComponent", (viewer => new HighlighterComponent(viewer)));
+components.registerComponent("HighlighterComponent", viewer => new HighlighterComponent(viewer));
 
-components.registerComponent("SelectionComponent", (viewer => new SelectionComponent(viewer)));
+components.registerComponent("SelectionComponent", viewer => new SelectionComponent(viewer));
 
-components.registerComponent("WCSHelperComponent", (viewer => new WCSHelperComponent(viewer)));
+components.registerComponent("WCSHelperComponent", viewer => new WCSHelperComponent(viewer));
 
 class GLTFLoadingManager extends LoadingManager {
     constructor(file, params = {}) {
@@ -2454,19 +2727,19 @@ class GLTFLoadingManager extends LoadingManager {
             this.fileURL = file;
             this.resourcePath = LoaderUtils.extractUrlBase(file);
         } else {
-            externalFiles.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
+            externalFiles.forEach((value, key) => this.fileURL = value === file ? key : this.fileURL);
             externalFiles.set(this.fileURL, file);
         }
-        externalFiles.forEach(((value, key) => {
+        externalFiles.forEach((value, key) => {
             let dataURL;
             if (typeof value === "string") dataURL = value; else dataURL = URL.createObjectURL(new Blob([ value ]));
             this.dataURLs.set(key, dataURL);
-        }));
-        this.setURLModifier((url => {
+        });
+        this.setURLModifier(url => {
             const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
             const dataURL = this.dataURLs.get(key);
-            return dataURL !== null && dataURL !== undefined ? dataURL : url;
-        }));
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+        });
     }
     dispose() {
         this.dataURLs.forEach(URL.revokeObjectURL);
@@ -2484,7 +2757,7 @@ class ModelImpl {
         }
         function disposeMaterials(material) {
             const materials = Array.isArray(material) ? material : [ material ];
-            materials.forEach((material => disposeMaterial(material)));
+            materials.forEach(material => disposeMaterial(material));
         }
         function disposeObject(object) {
             if (object.geometry) object.geometry.dispose();
@@ -2494,17 +2767,17 @@ class ModelImpl {
         this.scene.clear();
     }
     getExtents(target) {
-        this.scene.traverseVisible((object => !object.children.length && target.expandByObject(object)));
+        this.scene.traverseVisible(object => !object.children.length && target.expandByObject(object));
         return target;
     }
     getObjects() {
         const objects = [];
-        this.scene.traverse((object => objects.push(object)));
+        this.scene.traverse(object => objects.push(object));
         return objects;
     }
     getVisibleObjects() {
         const objects = [];
-        this.scene.traverseVisible((object => objects.push(object)));
+        this.scene.traverseVisible(object => objects.push(object));
         return objects;
     }
     hasObject(object) {
@@ -2516,23 +2789,23 @@ class ModelImpl {
     }
     getOwnObjects(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
-        return objects.filter((object => this.hasObject(object)));
+        return objects.filter(object => this.hasObject(object));
     }
     getObjectsByHandles(handles) {
         const handleSet = new Set(handles);
         const objects = [];
-        this.scene.traverse((object => handleSet.has(object.userData.handle) && objects.push(object)));
+        this.scene.traverse(object => handleSet.has(object.userData.handle) && objects.push(object));
         return objects;
     }
     getHandlesByObjects(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
         const handlesSet = new Set;
-        this.getOwnObjects(objects).forEach((object => handlesSet.add(object.userData.handle)));
+        this.getOwnObjects(objects).forEach(object => handlesSet.add(object.userData.handle));
         return Array.from(handlesSet);
     }
     hideObjects(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
-        this.getOwnObjects(objects).forEach((object => object.visible = false));
+        this.getOwnObjects(objects).forEach(object => object.visible = false);
         return this;
     }
     hideAllObjects() {
@@ -2541,20 +2814,20 @@ class ModelImpl {
     isolateObjects(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
         const visibleSet = new Set(objects);
-        this.getOwnObjects(objects).forEach((object => object.traverseAncestors((parent => visibleSet.add(parent)))));
-        this.scene.traverse((object => object.visible = visibleSet.has(object)));
+        this.getOwnObjects(objects).forEach(object => object.traverseAncestors(parent => visibleSet.add(parent)));
+        this.scene.traverse(object => object.visible = visibleSet.has(object));
         return this;
     }
     showObjects(objects) {
         if (!Array.isArray(objects)) objects = [ objects ];
-        this.getOwnObjects(objects).forEach((object => {
+        this.getOwnObjects(objects).forEach(object => {
             object.visible = true;
-            object.traverseAncestors((parent => parent.visible = true));
-        }));
+            object.traverseAncestors(parent => parent.visible = true);
+        });
         return this;
     }
     showAllObjects() {
-        this.scene.traverse((object => object.visible = true));
+        this.scene.traverse(object => object.visible = true);
         return this;
     }
     showOriginalObjects(objects) {
@@ -2566,10 +2839,10 @@ class ModelImpl {
     explode(scale = 0, coeff = 4) {
         function calcExplodeDepth(object, depth) {
             let res = depth;
-            object.children.forEach((x => {
+            object.children.forEach(x => {
                 const objectDepth = calcExplodeDepth(x, depth + 1);
                 if (res < objectDepth) res = objectDepth;
-            }));
+            });
             object.userData.originalPosition = object.position.clone();
             object.userData.originalCenter = (new Box3).setFromObject(object).getCenter(new Vector3);
             object.userData.isExplodeLocked = depth > 2 && object.children.length === 0;
@@ -2591,7 +2864,7 @@ class ModelImpl {
                 const objectOffset = objectCenter.clone().sub(parentCenter).multiplyScalar(objectScale);
                 object.position.add(objectOffset);
             }
-            object.children.forEach((x => explodeObject(x, depth + 1)));
+            object.children.forEach(x => explodeObject(x, depth + 1));
         }
         explodeObject(this.scene, 0);
         this.scene.updateMatrixWorld();
@@ -2647,9 +2920,9 @@ class DynamicModelImpl extends ModelImpl {
     }
     getObjects() {
         const objects = [];
-        this.gltfLoader.originalObjects.forEach((object => {
+        this.gltfLoader.originalObjects.forEach(object => {
             objects.push(object);
-        }));
+        });
         return objects;
     }
     getVisibleObjects() {
@@ -2661,16 +2934,16 @@ class DynamicModelImpl extends ModelImpl {
     getObjectsByHandles(handles) {
         const handlesSet = new Set(handles);
         const objects = [];
-        handlesSet.forEach((handle => {
+        handlesSet.forEach(handle => {
             const handle2 = `${this.modelId}_${handle}`;
             const handles = this.gltfLoader.handleToObjects.get(handle2) || [];
             objects.push(...Array.from(handles));
-        }));
+        });
         return objects;
     }
     getHandlesByObjects(objects) {
         const handles = super.getHandlesByObjects(objects);
-        return handles.map((x => x.split("_").pop()));
+        return handles.map(x => x.split("_").pop());
     }
     hideObjects(objects) {
         const handles = super.getHandlesByObjects(objects);
@@ -2711,13 +2984,24 @@ const GL_COMPONENT_TYPES = {
 };
 
 const GL_CONSTANTS = {
+    FLOAT: 5126,
+    FLOAT_MAT3: 35675,
+    FLOAT_MAT4: 35676,
+    FLOAT_VEC2: 35664,
+    FLOAT_VEC3: 35665,
+    FLOAT_VEC4: 35666,
+    LINEAR: 9729,
+    REPEAT: 10497,
+    SAMPLER_2D: 35678,
     POINTS: 0,
     LINES: 1,
     LINE_LOOP: 2,
     LINE_STRIP: 3,
     TRIANGLES: 4,
     TRIANGLE_STRIP: 5,
-    TRIANGLE_FAN: 6
+    TRIANGLE_FAN: 6,
+    UNSIGNED_BYTE: 5121,
+    UNSIGNED_SHORT: 5123
 };
 
 const MAX_GAP = 128 * 1024;
@@ -2765,19 +3049,19 @@ class GltfStructure {
         return this.json;
     }
     scheduleRequest(request) {
-        return new Promise(((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             this.pendingRequests.push({
                 ...request,
                 _resolve: resolve,
                 _reject: reject
             });
-        }));
+        });
     }
     async flushBufferRequests() {
         if (!this.pendingRequests || this.pendingRequests.length === 0) return;
         const requests = [ ...this.pendingRequests ];
         this.pendingRequests = [];
-        requests.sort(((a, b) => a.offset - b.offset));
+        requests.sort((a, b) => a.offset - b.offset);
         const mergedRanges = [];
         let current = {
             start: requests[0].offset,
@@ -2837,7 +3121,7 @@ class GltfStructure {
                 });
             }
         }
-        const promises = finalRanges.map((async (range, index) => {
+        const promises = finalRanges.map(async (range, index) => {
             await this.loader.waitForChunkSlot();
             try {
                 const length = range.end - range.start;
@@ -2865,7 +3149,7 @@ class GltfStructure {
             } finally {
                 this.loader.releaseChunkSlot();
             }
-        }));
+        });
         await Promise.all(promises);
         this.pendingRequests = [];
     }
@@ -3022,7 +3306,7 @@ class GltfStructure {
         };
         const texturePromises = [];
         for (let i = 0; i < this.json.textures.length; i++) {
-            texturePromises.push(loadTexture(this.json.textures[i].source).then((texture => this.textureCache.set(i, texture))));
+            texturePromises.push(loadTexture(this.json.textures[i].source).then(texture => this.textureCache.set(i, texture)));
         }
         await Promise.all(texturePromises);
     }
@@ -3101,9 +3385,9 @@ class GltfStructure {
         return null;
     }
     disposeMaterials() {
-        this.textureCache.forEach((texture => texture.dispose()));
+        this.textureCache.forEach(texture => texture.dispose());
         this.textureCache.clear();
-        this.materials.forEach((material => {
+        this.materials.forEach(material => {
             if (material.map) material.map.dispose();
             if (material.lightMap) material.lightMap.dispose();
             if (material.bumpMap) material.bumpMap.dispose();
@@ -3115,9 +3399,9 @@ class GltfStructure {
             if (material.roughnessMap) material.roughnessMap.dispose();
             if (material.emissiveMap) material.emissiveMap.dispose();
             material.dispose();
-        }));
+        });
         this.materials.clear();
-        this.materialCache.forEach((materialCache => {
+        this.materialCache.forEach(materialCache => {
             if (materialCache.mesh) {
                 if (materialCache.mesh.map) materialCache.mesh.map.dispose();
                 if (materialCache.mesh.lightMap) materialCache.mesh.lightMap.dispose();
@@ -3139,7 +3423,7 @@ class GltfStructure {
                 if (materialCache.lines.map) materialCache.lines.map.dispose();
                 materialCache.lines.dispose();
             }
-        }));
+        });
         this.materialCache.clear();
     }
     estimateNodeSize(meshIndex) {
@@ -3264,29 +3548,29 @@ class DynamicGltfLoader {
     setMemoryLimit(bytesLimit) {}
     estimateGeometrySize(nodeGroup) {
         let totalSize = 0;
-        nodeGroup.traverse((child => {
+        nodeGroup.traverse(child => {
             if (child.geometry) {
                 if (this.abortController.signal.aborted) {
                     throw new DOMException("Loading aborted", "AbortError");
                 }
                 const geometry = child.geometry;
                 if (geometry.attributes) {
-                    Object.values(geometry.attributes).forEach((attribute => {
+                    Object.values(geometry.attributes).forEach(attribute => {
                         if (attribute && attribute.array) {
                             totalSize += attribute.array.byteLength;
                         }
-                    }));
+                    });
                 }
                 if (geometry.index && geometry.index.array) {
                     totalSize += geometry.index.array.byteLength;
                 }
             }
-        }));
+        });
         return totalSize;
     }
     recalculateScene() {
         const geometries = [];
-        this.scene.traverse((object => {
+        this.scene.traverse(object => {
             if (this.abortController.signal.aborted) {
                 throw new DOMException("Loading aborted", "AbortError");
             }
@@ -3299,11 +3583,11 @@ class DynamicGltfLoader {
                     distance: object.position.distanceTo(this.camera.position)
                 });
             }
-        }));
+        });
         if (this.abortController.signal.aborted) {
             throw new DOMException("Loading aborted", "AbortError");
         }
-        geometries.sort(((a, b) => b.distance - a.distance));
+        geometries.sort((a, b) => b.distance - a.distance);
         let currentMemoryUsage = 0;
         for (const geo of geometries) {
             currentMemoryUsage += geo.size;
@@ -3415,9 +3699,9 @@ class DynamicGltfLoader {
                 node.loading = false;
                 return;
             }
-            bufferRequests.sort(((a, b) => a.offset - b.offset));
+            bufferRequests.sort((a, b) => a.offset - b.offset);
             const minOffset = bufferRequests[0].offset;
-            const maxOffset = Math.max(...bufferRequests.map((r => r.offset + r.length)));
+            const maxOffset = Math.max(...bufferRequests.map(r => r.offset + r.length));
             const totalLength = maxOffset - minOffset;
             const {buffer: buffer, relOffset: baseRelOffset} = await node.structure.scheduleRequest({
                 offset: minOffset,
@@ -3433,25 +3717,25 @@ class DynamicGltfLoader {
                 const geometry = new BufferGeometry;
                 const reqs = primitiveReqMap.get(primIdx);
                 if (primitive.attributes.POSITION !== undefined) {
-                    const req = reqs.find((r => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION));
+                    const req = reqs.find(r => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION);
                     const accessor = node.structure.json.accessors[primitive.attributes.POSITION];
                     const components = node.structure.getNumComponents(accessor.type);
                     geometry.setAttribute("position", new BufferAttribute(req.data, components));
                 }
                 if (primitive.attributes.NORMAL !== undefined) {
-                    const req = reqs.find((r => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL));
+                    const req = reqs.find(r => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL);
                     const accessor = node.structure.json.accessors[primitive.attributes.NORMAL];
                     const components = node.structure.getNumComponents(accessor.type);
                     geometry.setAttribute("normal", new BufferAttribute(req.data, components));
                 }
                 if (primitive.attributes.TEXCOORD_0 !== undefined) {
-                    const req = reqs.find((r => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0));
+                    const req = reqs.find(r => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0);
                     const accessor = node.structure.json.accessors[primitive.attributes.TEXCOORD_0];
                     const components = node.structure.getNumComponents(accessor.type);
                     geometry.setAttribute("uv", new BufferAttribute(req.data, components));
                 }
                 if (primitive.indices !== undefined) {
-                    const req = reqs.find((r => r.type === "index" && r.accessorIndex === primitive.indices));
+                    const req = reqs.find(r => r.type === "index" && r.accessorIndex === primitive.indices);
                     geometry.setIndex(new BufferAttribute(req.data, 1));
                 }
                 let material;
@@ -3550,14 +3834,14 @@ class DynamicGltfLoader {
             } else {
                 this.scene.remove(node.object);
             }
-            node.object.traverse((child => {
+            node.object.traverse(child => {
                 if (child.geometry) {
                     const geometrySize = this.geometryCache.get(child.geometry.uuid) || 0;
                     this.currentMemoryUsage -= geometrySize;
                     this.geometryCache.delete(child.geometry.uuid);
                     child.geometry.dispose();
                 }
-            }));
+            });
             node.object = null;
             node.loaded = false;
             this.updateMemoryIndicator();
@@ -3566,7 +3850,7 @@ class DynamicGltfLoader {
     }
     checkDistances() {
         const cameraPosition = this.camera.position;
-        this.nodes.forEach(((node, nodeId) => {
+        this.nodes.forEach((node, nodeId) => {
             const distance = cameraPosition.distanceTo(node.position);
             if (node.loaded) {
                 if (distance > this.unloadDistance) {
@@ -3577,7 +3861,7 @@ class DynamicGltfLoader {
                     this.loadNode(nodeId);
                 }
             }
-        }));
+        });
     }
     async loadStructure(structures) {
         this.clear();
@@ -3620,7 +3904,7 @@ class DynamicGltfLoader {
             }
         }
         const ignoreEdges = estimatedSize * 2 > this.memoryLimit;
-        this.nodesToLoad.sort(((a, b) => {
+        this.nodesToLoad.sort((a, b) => {
             const nodeA = this.nodes.get(a);
             const nodeB = this.nodes.get(b);
             if (!nodeA?.geometryExtents || !nodeB?.geometryExtents) {
@@ -3631,16 +3915,16 @@ class DynamicGltfLoader {
             const volumeA = sizeA.x * sizeA.y * sizeA.z;
             const volumeB = sizeB.x * sizeB.y * sizeB.z;
             return volumeB - volumeA;
-        }));
+        });
         if (!ignoreEdges && this.visibleEdges) {
             this.nodesToLoad.push(...this.edgeNodes);
         }
         this.dispatchEvent("databasechunk", {
             totalNodes: this.nodesToLoad.length,
-            structures: this.structures.map((s => ({
+            structures: this.structures.map(s => ({
                 id: s.id,
-                nodeCount: this.nodesToLoad.filter((nodeId => nodeId.startsWith(s.id))).length
-            })))
+                nodeCount: this.nodesToLoad.filter(nodeId => nodeId.startsWith(s.id)).length
+            }))
         });
     }
     async processNodeHierarchy(structure, nodeId, parentGroup) {
@@ -3760,9 +4044,9 @@ class DynamicGltfLoader {
                     this.dispatchEvent("update");
                     this.lastUpdateTime = currentTime;
                 }
-                await new Promise((resolve => {
+                await new Promise(resolve => {
                     setTimeout(resolve, 0);
-                }));
+                });
             }
         };
         try {
@@ -3807,12 +4091,12 @@ class DynamicGltfLoader {
         console.timeEnd("optimize scene");
     }
     cleanupPartialLoad() {
-        this.nodesToLoad.forEach((nodeId => {
+        this.nodesToLoad.forEach(nodeId => {
             const node = this.nodes.get(nodeId);
             if (node && node.loading) {
                 this.unloadNode(nodeId);
             }
-        }));
+        });
     }
     createDefaultMaterial(primitiveMode = undefined) {
         if (primitiveMode === GL_CONSTANTS.POINTS) {
@@ -3896,7 +4180,7 @@ class DynamicGltfLoader {
         this.nodesToLoad = [];
     }
     removeOptimization() {
-        this.originalObjects.forEach((obj => obj.visible = true));
+        this.originalObjects.forEach(obj => obj.visible = true);
         const disposeMerged = obj => {
             if (obj.parent) {
                 obj.parent.remove(obj);
@@ -3924,13 +4208,13 @@ class DynamicGltfLoader {
     }
     clear() {
         this.chunkQueue = [];
-        this.structures.forEach((structure => {
+        this.structures.forEach(structure => {
             if (structure) {
                 structure.clear();
             }
-        }));
+        });
         this.structures = [];
-        this.nodes.forEach((node => {
+        this.nodes.forEach(node => {
             if (node.object) {
                 if (node.object.parent) {
                     node.object.parent.remove(node.object);
@@ -3940,72 +4224,72 @@ class DynamicGltfLoader {
                 }
                 if (node.object.material) {
                     if (Array.isArray(node.object.material)) {
-                        node.object.material.forEach((material => material.dispose()));
+                        node.object.material.forEach(material => material.dispose());
                     } else {
                         node.object.material.dispose();
                     }
                 }
             }
-        }));
+        });
         this.nodes.clear();
-        this.loadedMeshes.forEach((mesh => {
+        this.loadedMeshes.forEach(mesh => {
             if (mesh.geometry) mesh.geometry.dispose();
             if (mesh.material) {
                 if (Array.isArray(mesh.material)) {
-                    mesh.material.forEach((material => material.dispose()));
+                    mesh.material.forEach(material => material.dispose());
                 } else {
                     mesh.material.dispose();
                 }
             }
-        }));
+        });
         this.loadedMeshes.clear();
-        this.structureRoots.forEach((rootGroup => {
+        this.structureRoots.forEach(rootGroup => {
             if (rootGroup) {
-                rootGroup.traverse((child => {
+                rootGroup.traverse(child => {
                     if (child.geometry) child.geometry.dispose();
                     if (child.material) {
                         if (Array.isArray(child.material)) {
-                            child.material.forEach((material => material.dispose()));
+                            child.material.forEach(material => material.dispose());
                         } else {
                             child.material.dispose();
                         }
                     }
-                }));
+                });
                 if (rootGroup.parent) {
                     rootGroup.parent.remove(rootGroup);
                 }
             }
-        }));
+        });
         this.structureRoots.clear();
-        this.mergedMesh.forEach((mesh => {
+        this.mergedMesh.forEach(mesh => {
             if (mesh.geometry) mesh.geometry.dispose();
             if (mesh.material) {
                 if (Array.isArray(mesh.material)) {
-                    mesh.material.forEach((material => material.dispose()));
+                    mesh.material.forEach(material => material.dispose());
                 } else {
                     mesh.material.dispose();
                 }
             }
             if (mesh.parent) mesh.parent.remove(mesh);
-        }));
+        });
         this.mergedMesh.clear();
-        this.mergedLines.forEach((line => {
+        this.mergedLines.forEach(line => {
             if (line.geometry) line.geometry.dispose();
             if (line.material) line.material.dispose();
             if (line.parent) line.parent.remove(line);
-        }));
+        });
         this.mergedLines.clear();
-        this.mergedLineSegments.forEach((lineSegment => {
+        this.mergedLineSegments.forEach(lineSegment => {
             if (lineSegment.geometry) lineSegment.geometry.dispose();
             if (lineSegment.material) lineSegment.material.dispose();
             if (lineSegment.parent) lineSegment.parent.remove(lineSegment);
-        }));
+        });
         this.mergedLineSegments.clear();
-        this.mergedPoints.forEach((points => {
+        this.mergedPoints.forEach(points => {
             if (points.geometry) points.geometry.dispose();
             if (points.material) points.material.dispose();
             if (points.parent) points.parent.remove(points);
-        }));
+        });
         this.mergedPoints.clear();
         this.geometryCache.clear();
         this.materialCache.clear();
@@ -4047,12 +4331,12 @@ class DynamicGltfLoader {
     }
     removeEventListener(event, handler) {
         if (this.eventHandlers[event]) {
-            this.eventHandlers[event] = this.eventHandlers[event].filter((h => h !== handler));
+            this.eventHandlers[event] = this.eventHandlers[event].filter(h => h !== handler);
         }
     }
     dispatchEvent(event, data) {
         if (this.eventHandlers[event]) {
-            this.eventHandlers[event].forEach((handler => handler(data)));
+            this.eventHandlers[event].forEach(handler => handler(data));
         }
     }
     registerObjectWithHandle(object, handle) {
@@ -4071,9 +4355,9 @@ class DynamicGltfLoader {
     getHandlesByObjects(objects) {
         if (!objects.length) return [];
         const handles = new Set;
-        objects.forEach((obj => {
+        objects.forEach(obj => {
             if (this.originalObjects.has(obj)) handles.add(obj.userData.handle);
-        }));
+        });
         return Array.from(handles);
     }
     getMaterialId(material, index) {
@@ -4129,7 +4413,7 @@ class DynamicGltfLoader {
         this.originalObjects.clear();
         this.originalObjectsToSelection.clear();
         const structureGroups = new Map;
-        this.scene.traverse((object => {
+        this.scene.traverse(object => {
             if (object.userData.structureId) {
                 const structureId = object.userData.structureId;
                 if (!structureGroups.has(structureId)) {
@@ -4156,7 +4440,7 @@ class DynamicGltfLoader {
                     this.addToMaterialGroup(object, group.mapPoints, group.points);
                 }
             }
-        }));
+        });
         for (const group of structureGroups.values()) {
             group.mapMeshes.clear();
             group.mapLines.clear();
@@ -4167,12 +4451,12 @@ class DynamicGltfLoader {
             this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
             this.mergePointsGroups(group.points, group.rootGroup);
         }
-        this.originalObjects.forEach((obj => {
+        this.originalObjects.forEach(obj => {
             obj.visible = false;
             if (!(obj instanceof Points) && !obj.userData.isEdge) {
                 this.originalObjectsToSelection.add(obj);
             }
-        }));
+        });
         this.dispatchEvent("update");
     }
     mergeMeshGroups(materialGroups, rootGroup) {
@@ -4200,11 +4484,11 @@ class DynamicGltfLoader {
                     this.mergedMesh.add(mergedMesh);
                     this.optimizedOriginalMap.set(mergedMesh, optimizedObjects);
                     mergedObjects.push(mergedMesh);
-                    geometries.forEach((geometry => {
+                    geometries.forEach(geometry => {
                         geometry.dispose();
-                    }));
+                    });
                 }
-                handles.forEach((handle => {
+                handles.forEach(handle => {
                     if (this.handleToOptimizedObjects.has(handle)) {
                         const existingObjects = this.handleToOptimizedObjects.get(handle);
                         existingObjects.push(...mergedObjects);
@@ -4212,12 +4496,12 @@ class DynamicGltfLoader {
                     } else {
                         this.handleToOptimizedObjects.set(handle, mergedObjects);
                     }
-                }));
+                });
             } catch (error) {
                 console.error("Failed to merge meshes for material:", error);
-                group.objects.forEach((mesh => {
+                group.objects.forEach(mesh => {
                     mesh.visible = true;
-                }));
+                });
             }
         }
     }
@@ -4226,15 +4510,15 @@ class DynamicGltfLoader {
             if (group.objects.length === 0) continue;
             const handles = new Set;
             let totalVertices = 0;
-            group.objects.map((line => {
+            group.objects.map(line => {
                 handles.add(line.userData.handle);
                 totalVertices += line.geometry.attributes.position.count;
-            }));
+            });
             const positions = new Float32Array(totalVertices * 3);
             let posOffset = 0;
             const indices = [];
             let vertexOffset = 0;
-            group.objects.forEach((line => {
+            group.objects.forEach(line => {
                 const geometry = line.geometry;
                 const positionAttr = geometry.attributes.position;
                 const vertexCount = positionAttr.count;
@@ -4252,7 +4536,7 @@ class DynamicGltfLoader {
                     indices.push(vertexOffset + i, vertexOffset + i + 1);
                 }
                 vertexOffset += vertexCount;
-            }));
+            });
             const geometry = new BufferGeometry;
             geometry.setAttribute("position", new BufferAttribute(positions, 3));
             geometry.setIndex(indices);
@@ -4266,7 +4550,7 @@ class DynamicGltfLoader {
             rootGroup.add(mergedLine);
             this.mergedLines.add(mergedLine);
             this.optimizedOriginalMap.set(mergedLine, group.objects);
-            handles.forEach((handle => {
+            handles.forEach(handle => {
                 if (this.handleToOptimizedObjects.has(handle)) {
                     const existingObjects = this.handleToOptimizedObjects.get(handle);
                     existingObjects.push(...mergedObjects);
@@ -4274,7 +4558,7 @@ class DynamicGltfLoader {
                 } else {
                     this.handleToOptimizedObjects.set(handle, mergedObjects);
                 }
-            }));
+            });
         }
     }
     mergeLineSegmentGroups(materialGroups, rootGroup) {
@@ -4302,11 +4586,11 @@ class DynamicGltfLoader {
                     this.mergedLineSegments.add(mergedLine);
                     this.optimizedOriginalMap.set(mergedLine, optimizedObjects);
                     mergedObjects.push(mergedLine);
-                    geometries.forEach((geometry => {
+                    geometries.forEach(geometry => {
                         geometry.dispose();
-                    }));
+                    });
                 }
-                handles.forEach((handle => {
+                handles.forEach(handle => {
                     if (this.handleToOptimizedObjects.has(handle)) {
                         const existingObjects = this.handleToOptimizedObjects.get(handle);
                         existingObjects.push(...mergedObjects);
@@ -4314,12 +4598,12 @@ class DynamicGltfLoader {
                     } else {
                         this.handleToOptimizedObjects.set(handle, mergedObjects);
                     }
-                }));
+                });
             } catch (error) {
                 console.warn("Failed to merge line segments for material:", error);
-                group.objects.forEach((line => {
+                group.objects.forEach(line => {
                     line.visible = true;
-                }));
+                });
             }
         }
     }
@@ -4348,11 +4632,11 @@ class DynamicGltfLoader {
                     this.mergedPoints.add(mergedPoints);
                     this.optimizedOriginalMap.set(mergedPoints, optimizedObjects);
                     mergedObjects.push(mergedPoints);
-                    geometries.forEach((geometry => {
+                    geometries.forEach(geometry => {
                         geometry.dispose();
-                    }));
+                    });
                 }
-                handles.forEach((handle => {
+                handles.forEach(handle => {
                     if (this.handleToOptimizedObjects.has(handle)) {
                         const existingObjects = this.handleToOptimizedObjects.get(handle);
                         existingObjects.push(...mergedObjects);
@@ -4360,22 +4644,22 @@ class DynamicGltfLoader {
                     } else {
                         this.handleToOptimizedObjects.set(handle, mergedObjects);
                     }
-                }));
+                });
             } catch (error) {
                 console.warn("Failed to merge points for material:", error);
-                group.objects.forEach((points => {
+                group.objects.forEach(points => {
                     points.visible = true;
-                }));
+                });
             }
         }
     }
     mergeInSingleSegment(structureId, rootGroup) {
-        const lineSegmentsArray = [ ...this.mergedLineSegments, ...this.mergedLines ].filter((obj => obj.userData.structureId === structureId));
+        const lineSegmentsArray = [ ...this.mergedLineSegments, ...this.mergedLines ].filter(obj => obj.userData.structureId === structureId);
         if (lineSegmentsArray.length === 0) return;
         try {
             const geometriesWithIndex = [];
-            const hasNormals = lineSegmentsArray.some((segment => segment.geometry.attributes.normal !== undefined));
-            lineSegmentsArray.forEach((segment => {
+            const hasNormals = lineSegmentsArray.some(segment => segment.geometry.attributes.normal !== undefined);
+            lineSegmentsArray.forEach(segment => {
                 const clonedGeometry = segment.geometry.clone();
                 segment.updateWorldMatrix(true, false);
                 clonedGeometry.applyMatrix4(segment.matrixWorld);
@@ -4401,7 +4685,7 @@ class DynamicGltfLoader {
                     clonedGeometry.setIndex(indices);
                 }
                 geometriesWithIndex.push(clonedGeometry);
-            }));
+            });
             const finalGeometry = mergeGeometries(geometriesWithIndex, false);
             const material = new LineBasicMaterial({
                 vertexColors: true
@@ -4413,33 +4697,33 @@ class DynamicGltfLoader {
             mergedLine.userData.structureId = structureId;
             rootGroup.add(mergedLine);
             this.mergedLineSegments.add(mergedLine);
-            lineSegmentsArray.forEach((obj => {
+            lineSegmentsArray.forEach(obj => {
                 if (obj.parent) {
                     obj.parent.remove(obj);
                 }
                 obj.geometry.dispose();
-            }));
+            });
         } catch (error) {
             console.error("Failed to merge geometries:", error);
-            lineSegmentsArray.forEach((obj => {
+            lineSegmentsArray.forEach(obj => {
                 obj.visible = true;
                 rootGroup.add(obj);
-            }));
+            });
         }
     }
     showOriginalObjects(objects) {
-        objects.forEach((obj => {
+        objects.forEach(obj => {
             if (this.originalObjects.has(obj)) {
                 obj.visible = true;
             }
-        }));
+        });
     }
     hideOriginalObjects(objects) {
-        objects.forEach((obj => {
+        objects.forEach(obj => {
             if (this.originalObjects.has(obj)) {
                 obj.visible = false;
             }
-        }));
+        });
     }
     createVAO(geometry) {
         if (!this.useVAO) {
@@ -4494,15 +4778,15 @@ class DynamicGltfLoader {
         this.syncHiddenObjects();
     }
     hideObjects(handles) {
-        handles.forEach((handle => {
+        handles.forEach(handle => {
             this.hiddenHandles.add(handle);
-        }));
+        });
         this.syncHiddenObjects();
     }
     showObjects(handles) {
-        handles.forEach((handle => {
+        handles.forEach(handle => {
             this.hiddenHandles.delete(handle);
-        }));
+        });
         this.syncHiddenObjects();
     }
     syncHiddenObjects() {
@@ -4523,47 +4807,47 @@ class DynamicGltfLoader {
         if (this.hiddenHandles.size === 0) {
             return;
         }
-        this.hiddenHandles.forEach((handle => {
+        this.hiddenHandles.forEach(handle => {
             const objects = this.handleToOptimizedObjects.get(handle);
             if (objects) {
-                objects.forEach((x => this.oldOptimizeObjects.add(x)));
+                objects.forEach(x => this.oldOptimizeObjects.add(x));
             }
-        }));
-        this.oldOptimizeObjects.forEach((optimizedObject => {
+        });
+        this.oldOptimizeObjects.forEach(optimizedObject => {
             optimizedObject.visible = false;
             const originObjects = this.optimizedOriginalMap.get(optimizedObject);
             const updateListToOptimize = [];
-            originObjects.forEach((obj => {
+            originObjects.forEach(obj => {
                 if (!this.hiddenHandles.has(obj.userData.handle)) {
                     updateListToOptimize.push(obj);
                 }
-            }));
+            });
             const firstObject = updateListToOptimize[0];
             if (firstObject instanceof Mesh || firstObject instanceof LineSegments) {
-                const geometries = updateListToOptimize.map((obj => {
+                const geometries = updateListToOptimize.map(obj => {
                     const geometry = obj.geometry.clone();
                     obj.updateWorldMatrix(true, false);
                     geometry.applyMatrix4(obj.matrixWorld);
                     return geometry;
-                }));
+                });
                 const newMergedGeometry = mergeGeometries(geometries);
                 const mergedObject = firstObject instanceof Mesh ? new Mesh(newMergedGeometry, optimizedObject.material) : new LineSegments(newMergedGeometry, optimizedObject.material);
                 mergedObject.visible = true;
                 optimizedObject.parent.add(mergedObject);
                 this.newOptimizedObjects.add(mergedObject);
-                geometries.forEach((geometry => {
+                geometries.forEach(geometry => {
                     geometry.dispose();
-                }));
+                });
             } else if (firstObject instanceof Line) {
                 let totalVertices = 0;
-                updateListToOptimize.map((line => {
+                updateListToOptimize.map(line => {
                     totalVertices += line.geometry.attributes.position.count;
-                }));
+                });
                 const positions = new Float32Array(totalVertices * 3);
                 let posOffset = 0;
                 const indices = [];
                 let vertexOffset = 0;
-                updateListToOptimize.forEach((line => {
+                updateListToOptimize.forEach(line => {
                     const geometry = line.geometry;
                     const positionAttr = geometry.attributes.position;
                     const vertexCount = positionAttr.count;
@@ -4581,7 +4865,7 @@ class DynamicGltfLoader {
                         indices.push(vertexOffset + i, vertexOffset + i + 1);
                     }
                     vertexOffset += vertexCount;
-                }));
+                });
                 const geometry = new BufferGeometry;
                 geometry.setAttribute("position", new BufferAttribute(positions, 3));
                 geometry.setIndex(indices);
@@ -4592,7 +4876,7 @@ class DynamicGltfLoader {
                 optimizedObject.parent.add(mergedLine);
                 this.newOptimizedObjects.add(mergedLine);
             }
-        }));
+        });
     }
     getStructureGeometryExtent(structureId) {
         const extent = new Box3;
@@ -4623,9 +4907,9 @@ class DynamicGltfLoader {
             this.activeChunkLoads++;
             return Promise.resolve();
         }
-        return new Promise((resolve => {
+        return new Promise(resolve => {
             this.chunkQueue.push(resolve);
-        }));
+        });
     }
     releaseChunkSlot() {
         this.activeChunkLoads--;
@@ -4653,7 +4937,7 @@ class GLTFCloudDynamicLoader {
         this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
         this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
         this.gltfLoader.setVisibleEdges(this.viewer.options.edgeModel);
-        this.gltfLoader.addEventListener("databasechunk", (data => {
+        this.gltfLoader.addEventListener("databasechunk", data => {
             const modelImpl = new DynamicModelImpl(scene);
             modelImpl.loader = this;
             modelImpl.viewer = this.viewer;
@@ -4670,8 +4954,8 @@ class GLTFCloudDynamicLoader {
                 file: model.file,
                 model: model
             });
-        }));
-        this.gltfLoader.addEventListener("geometryprogress", (data => {
+        });
+        this.gltfLoader.addEventListener("geometryprogress", data => {
             const progress = data.loaded / data.total;
             this.viewer.emitEvent({
                 type: "geometryprogress",
@@ -4679,18 +4963,18 @@ class GLTFCloudDynamicLoader {
                 file: model.file,
                 model: model
             });
-        }));
-        this.gltfLoader.addEventListener("geometryerror", (data => {
+        });
+        this.gltfLoader.addEventListener("geometryerror", data => {
             this.viewer.emitEvent({
                 type: "geometryerror",
                 data: data,
                 file: model.file,
                 model: model
             });
-        }));
-        this.gltfLoader.addEventListener("update", (data => {
+        });
+        this.gltfLoader.addEventListener("update", data => {
             this.viewer.update();
-        }));
+        });
         const loadController = {
             loadJson: async () => {
                 const progress = progress => {
@@ -4706,11 +4990,11 @@ class GLTFCloudDynamicLoader {
                 return json;
             },
             loadBinaryData: requests => {
-                const ranges = requests.map((request => ({
+                const ranges = requests.map(request => ({
                     begin: request.offset,
                     end: request.offset + request.length - 1,
                     requestId: this.requestId++
-                })));
+                }));
                 return model.downloadResourceRange(model.geometry[0], undefined, ranges, undefined, this.gltfLoader.getAbortController().signal);
             },
             baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`)
@@ -4727,9 +5011,9 @@ class GLTFCloudDynamicLoader {
 
 const loaders = loadersRegistry("threejs");
 
-loaders.registerLoader("gltf-file", (viewer => new GLTFFileLoader(viewer)));
+loaders.registerLoader("gltf-file", viewer => new GLTFFileLoader(viewer));
 
-loaders.registerLoader("gltf-cloud", (viewer => new GLTFCloudDynamicLoader(viewer)));
+loaders.registerLoader("gltf-cloud", viewer => new GLTFCloudDynamicLoader(viewer));
 
 class SSAARenderPass extends Pass {
     constructor(scenes, camera, clearColor = 0, clearAlpha = 0) {
@@ -4807,7 +5091,7 @@ class SSAARenderPass extends Pass {
             renderer.setClearColor(this.clearColor, this.clearAlpha);
             renderer.setRenderTarget(this._sampleRenderTarget);
             renderer.clear();
-            this.scenes.forEach((scene => renderer.render(scene, this.camera)));
+            this.scenes.forEach(scene => renderer.render(scene, this.camera));
             renderer.setRenderTarget(this.renderToScreen ? null : writeBuffer);
             if (i === 0) {
                 renderer.setClearColor(0, 0);
@@ -4859,7 +5143,7 @@ class Viewer extends EventEmitter2 {
         this.target = new Vector3;
         this._activeDragger = null;
         this._components = [];
-        this.renderTime = 0;
+        this._renderTime = 0;
         this.render = this.render.bind(this);
         this.update = this.update.bind(this);
         this._markup = new Markup;
@@ -4877,7 +5161,7 @@ class Viewer extends EventEmitter2 {
         return this._markup;
     }
     initialize(canvas, onProgress) {
-        this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
+        this.addEventListener("optionschange", event => this.syncOptions(event.data));
         this.scene = new Scene;
         this.helpers = new Helpers;
         this.target = new Vector3(0, 0, 0);
@@ -4917,16 +5201,17 @@ class Viewer extends EventEmitter2 {
         this.composer.addPass(this.fxaaPass);
         this.composer.addPass(this.ssaaRenderPass);
         this.composer.addPass(this.outputPass);
+        this.composer.setSize(width, height);
         this.canvas = canvas;
-        this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
+        this.canvasEvents.forEach(x => canvas.addEventListener(x, this.canvaseventlistener));
         this._markup.initialize(this.canvas, this.canvasEvents, this, this);
         for (const name of components.getComponents().keys()) {
             this._components.push(components.createComponent(name, this));
         }
         this.syncOptions();
         this.syncOverlay();
-        this.renderTime = performance.now();
-        this.render(this.renderTime);
+        this._renderTime = performance.now();
+        this.render(this._renderTime);
         if (typeof onProgress === "function") onProgress(new ProgressEvent("progress", {
             lengthComputable: true,
             loaded: 1,
@@ -4951,11 +5236,11 @@ class Viewer extends EventEmitter2 {
         });
         this.removeAllListeners();
         this.setActiveDragger();
-        this._components.forEach((component => component.dispose()));
+        this._components.forEach(component => component.dispose());
         this._components = [];
         this._markup.dispose();
         if (this.canvas) {
-            this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
+            this.canvasEvents.forEach(x => this.canvas.removeEventListener(x, this.canvaseventlistener));
             this.canvas = undefined;
         }
         if (this.composer) this.composer.dispose();
@@ -4982,8 +5267,30 @@ class Viewer extends EventEmitter2 {
     isInitialized() {
         return !!this.renderer;
     }
+    setSize(width, height, updateStyle = true) {
+        if (!this.renderer) return;
+        const camera = this.camera;
+        const aspect = width / height;
+        if (camera.isPerspectiveCamera) {
+            camera.aspect = aspect;
+            camera.updateProjectionMatrix();
+        }
+        if (camera.isOrthographicCamera) {
+            camera.left = camera.bottom * aspect;
+            camera.right = camera.top * aspect;
+            camera.updateProjectionMatrix();
+        }
+        this.renderer.setSize(width, height, updateStyle);
+        this.composer.setSize(width, height);
+        this.update(true);
+        this.emitEvent({
+            type: "resize",
+            width: width,
+            height: height
+        });
+    }
     update(force = false) {
-        this.renderNeeded = true;
+        this._renderNeeded = true;
         if (force) this.render();
         this.emitEvent({
             type: "update",
@@ -4993,18 +5300,18 @@ class Viewer extends EventEmitter2 {
     render(time, force = false) {
         var _a, _b;
         if (!this.renderer) return;
-        if (!(this.renderNeeded || force)) return;
+        if (!this._renderNeeded && !force) return;
         if (!time) time = performance.now();
-        const deltaTime = (time - this.renderTime) / 1e3;
-        this.renderTime = time;
-        this.renderNeeded = false;
+        const deltaTime = (time - this._renderTime) / 1e3;
+        this._renderTime = time;
+        this._renderNeeded = false;
         if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
             this.renderer.render(this.scene, this.camera);
             this.renderer.render(this.helpers, this.camera);
         } else {
             this.composer.render(deltaTime);
         }
-        (_b = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.updatePreview) === null || _b === undefined ? undefined : _b.call(_a);
+        (_b = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.updatePreview) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.emitEvent({
             type: "render",
             time: time,
@@ -5027,7 +5334,7 @@ class Viewer extends EventEmitter2 {
         let model = file;
         if (model && typeof model.getModels === "function") {
             const models = await model.getModels();
-            model = models.find((model => model.default)) || models[0] || file;
+            model = models.find(model => model.default) || models[0] || file;
         }
         if (!model) throw new Error(`Format not supported`);
         let format = params.format;
@@ -5079,7 +5386,7 @@ class Viewer extends EventEmitter2 {
         });
     }
     cancel() {
-        this.loaders.forEach((loader => loader.cancel()));
+        this.loaders.forEach(loader => loader.cancel());
         this.emitEvent({
             type: "cancel"
         });
@@ -5091,9 +5398,9 @@ class Viewer extends EventEmitter2 {
         this.clearSlices();
         this.clearOverlay();
         this.clearSelected();
-        this.loaders.forEach((loader => loader.dispose()));
+        this.loaders.forEach(loader => loader.dispose());
         this.loaders = [];
-        this.models.forEach((model => model.dispose()));
+        this.models.forEach(model => model.dispose());
         this.models = [];
         this.scene.clear();
         this.helpers.clear();
@@ -5169,7 +5476,7 @@ class Viewer extends EventEmitter2 {
                 newDragger = draggers.createDragger(name, this);
                 if (newDragger) {
                     this._activeDragger = newDragger;
-                    (_b = (_a = this._activeDragger).initialize) === null || _b === undefined ? undefined : _b.call(_a);
+                    (_b = (_a = this._activeDragger).initialize) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
             }
             const canvas = this.canvas;
@@ -5193,7 +5500,7 @@ class Viewer extends EventEmitter2 {
         }
     }
     getComponent(name) {
-        return this._components.find((component => component.name === name));
+        return this._components.find(component => component.name === name);
     }
     is3D() {
         return true;
@@ -5290,16 +5597,16 @@ class Viewer extends EventEmitter2 {
             }
         };
         const setClippingPlanes = clipping_planes => {
-            clipping_planes === null || clipping_planes === undefined ? undefined : clipping_planes.forEach((clipping_plane => {
+            clipping_planes === null || clipping_planes === void 0 ? void 0 : clipping_planes.forEach(clipping_plane => {
                 const plane = new Plane;
                 plane.setFromNormalAndCoplanarPoint(getVector3FromPoint3d(clipping_plane.direction), getVector3FromPoint3d(clipping_plane.location));
                 this.renderer.clippingPlanes.push(plane);
-            }));
+            });
         };
         const setSelection = selection => {
-            if (selection) this.setSelected(selection.map((component => component.handle)));
+            if (selection) this.setSelected(selection.map(component => component.handle));
         };
-        const draggerName = (_a = this._activeDragger) === null || _a === undefined ? undefined : _a.name;
+        const draggerName = (_a = this._activeDragger) === null || _a === void 0 ? void 0 : _a.name;
         this.setActiveDragger();
         this.clearSlices();
         this.clearOverlay();
@@ -5311,7 +5618,7 @@ class Viewer extends EventEmitter2 {
         setClippingPlanes(viewpoint.clipping_planes);
         setSelection(viewpoint.selection);
         this._markup.setViewpoint(viewpoint);
-        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === undefined ? undefined : _b.camera_target) !== null && _c !== undefined ? _c : this.target);
+        this.target = getVector3FromPoint3d((_c = (_b = viewpoint.custom_fields) === null || _b === void 0 ? void 0 : _b.camera_target) !== null && _c !== void 0 ? _c : this.target);
         this.setActiveDragger(draggerName);
         this.emitEvent({
             type: "drawviewpoint",
@@ -5346,18 +5653,18 @@ class Viewer extends EventEmitter2 {
         };
         const getClippingPlanes = () => {
             const clipping_planes = [];
-            this.renderer.clippingPlanes.forEach((plane => {
+            this.renderer.clippingPlanes.forEach(plane => {
                 const clipping_plane = {
                     location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3)),
                     direction: getPoint3dFromVector3(plane.normal)
                 };
                 clipping_planes.push(clipping_plane);
-            }));
+            });
             return clipping_planes;
         };
-        const getSelection = () => this.getSelected().map((handle => ({
+        const getSelection = () => this.getSelected().map(handle => ({
             handle: handle
-        })));
+        }));
         const viewpoint = {
             custom_fields: {}
         };