@inweb/viewer-three 25.3.15

package/dist/viewer-three.module.js

@@ -0,0 +1,1102 @@
+import * as THREE from "three";
+
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+
+import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
+
+class Commands {
+    constructor() {
+        this._commands = new Map;
+    }
+    registerCommand(id, handler, description, thisArg) {
+        this._commands.set(id, {
+            id: id,
+            handler: handler,
+            thisArg: thisArg,
+            description: description
+        });
+    }
+    registerCommandAlias(id, alias) {
+        this.registerCommand(alias, ((viewer, ...args) => this.executeCommand(id, viewer, ...args)));
+    }
+    getCommand(id) {
+        return this._commands.get(id);
+    }
+    getCommands() {
+        const map = new Map;
+        this._commands.forEach(((value, key) => map.set(key, value)));
+        return map;
+    }
+    executeCommand(id, viewer, ...args) {
+        const command = this._commands.get(id);
+        if (!command) {
+            if (viewer) {
+                const isDraggerCommand = viewer.draggers.includes(id);
+                if (isDraggerCommand) return viewer.setActiveDragger(id);
+            }
+            console.warn(`Command '${id}' not found`);
+            return undefined;
+        }
+        const {handler: handler, thisArg: thisArg} = command;
+        const result = handler.apply(thisArg, [ viewer, ...args ]);
+        viewer === null || viewer === void 0 ? void 0 : viewer.emit({
+            type: "command",
+            data: id,
+            args: args
+        });
+        return result;
+    }
+}
+
+const _commands = new Map;
+
+function commands(viewerType = "") {
+    let result = _commands.get(viewerType);
+    if (!result) {
+        result = new Commands;
+        _commands.set(viewerType, result);
+    }
+    return result;
+}
+
+commands("").registerCommand("noop", (() => {}));
+
+commands("VisualizeJS").registerCommand("noop", (() => {}));
+
+commands("ThreeJS").registerCommand("noop", (() => {}));
+
+class Options {
+    constructor(emitter) {
+        this._emitter = emitter;
+        this._data = Options.defaults();
+        this.loadFromStorage();
+    }
+    static defaults() {
+        return {
+            showWCS: true,
+            cameraAnimation: true,
+            antialiasing: true,
+            groundShadow: false,
+            shadows: false,
+            cameraAxisXSpeed: 4,
+            cameraAxisYSpeed: 1,
+            ambientOcclusion: false,
+            enableStreamingMode: true,
+            enablePartialMode: false,
+            memoryLimit: 3294967296,
+            cuttingPlaneFillColor: {
+                red: 255,
+                green: 152,
+                blue: 0
+            },
+            edgesColor: {
+                r: 255,
+                g: 152,
+                b: 0
+            },
+            facesColor: {
+                r: 255,
+                g: 152,
+                b: 0
+            },
+            edgesVisibility: true,
+            edgesOverlap: true,
+            facesOverlap: false,
+            facesTransparancy: 200,
+            enableCustomHighlight: true,
+            sceneGraph: false,
+            edgeModel: true,
+            reverseZoomWheel: false,
+            enableZoomWheel: true,
+            enableGestures: true,
+            geometryType: "vsfx"
+        };
+    }
+    notifierChangeEvent() {
+        if (this._emitter !== undefined) {
+            this.saveToStorage();
+            this._emitter.emit({
+                type: "optionschange",
+                data: this
+            });
+        }
+    }
+    saveToStorage() {
+        if (typeof window !== "undefined") try {
+            localStorage.setItem("od-client-settings", JSON.stringify(this.data));
+        } catch (error) {
+            console.error("Cannot save client settings.", error);
+        }
+    }
+    loadFromStorage() {
+        if (typeof window !== "undefined") try {
+            const item = localStorage.getItem("od-client-settings");
+            if (item) {
+                const data = JSON.parse(item);
+                this.data = {
+                    ...data
+                };
+            }
+        } catch (error) {
+            console.error("Cannot load client settings.", error);
+        }
+    }
+    resetToDefaults(fields) {
+        if (fields !== undefined) {
+            const defaults = Options.defaults();
+            const resetData = fields.reduce(((acc, field) => {
+                acc[field] = defaults[field];
+                return acc;
+            }), {});
+            this.data = {
+                ...this.data,
+                ...resetData
+            };
+        } else {
+            this.data = {
+                ...this.data,
+                ...Options.defaults()
+            };
+        }
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        const sceneGraph = value.enablePartialMode ? false : value.sceneGraph;
+        this._data = {
+            ...Options.defaults(),
+            ...this._data,
+            ...value,
+            sceneGraph: sceneGraph
+        };
+        this.notifierChangeEvent();
+    }
+    get showWCS() {
+        return this._data.showWCS;
+    }
+    set showWCS(value) {
+        this._data.showWCS = value;
+        this.notifierChangeEvent();
+    }
+    get cameraAnimation() {
+        return this._data.cameraAnimation;
+    }
+    set cameraAnimation(value) {
+        this._data.cameraAnimation = value;
+        this.notifierChangeEvent();
+    }
+    get antialiasing() {
+        return this._data.antialiasing;
+    }
+    set antialiasing(value) {
+        this._data.antialiasing = value;
+        this.notifierChangeEvent();
+    }
+    get groundShadow() {
+        return this._data.groundShadow;
+    }
+    set groundShadow(value) {
+        this._data.groundShadow = value;
+        this.notifierChangeEvent();
+    }
+    get shadows() {
+        return this._data.shadows;
+    }
+    set shadows(value) {
+        this._data.shadows = value;
+        this.notifierChangeEvent();
+    }
+    get cameraAxisXSpeed() {
+        return this._data.cameraAxisXSpeed;
+    }
+    set cameraAxisXSpeed(value) {
+        this._data.cameraAxisXSpeed = value;
+        this.notifierChangeEvent();
+    }
+    get cameraAxisYSpeed() {
+        return this._data.cameraAxisYSpeed;
+    }
+    set cameraAxisYSpeed(value) {
+        this.cameraAxisYSpeed = value;
+        this.notifierChangeEvent();
+    }
+    get ambientOcclusion() {
+        return this._data.ambientOcclusion;
+    }
+    set ambientOcclusion(value) {
+        this._data.ambientOcclusion = value;
+        this.notifierChangeEvent();
+    }
+    get enableStreamingMode() {
+        return this._data.enableStreamingMode;
+    }
+    set enableStreamingMode(value) {
+        this._data.enableStreamingMode = value;
+        if (this._data.enableStreamingMode) {
+            this._data.enablePartialMode = false;
+        }
+        this.notifierChangeEvent();
+    }
+    get enablePartialMode() {
+        return this._data.enablePartialMode;
+    }
+    set enablePartialMode(value) {
+        this._data.enablePartialMode = value;
+        if (value) this._data.sceneGraph = false;
+        this.notifierChangeEvent();
+    }
+    get memoryLimit() {
+        return this._data.memoryLimit;
+    }
+    set memoryLimit(value) {
+        this._data.memoryLimit = value;
+        this.notifierChangeEvent();
+    }
+    get cuttingPlaneFillColor() {
+        return this._data.cuttingPlaneFillColor;
+    }
+    set cuttingPlaneFillColor(value) {
+        this._data.cuttingPlaneFillColor = value;
+        this.notifierChangeEvent();
+    }
+    get edgesColor() {
+        return this._data.edgesColor;
+    }
+    set edgesColor(value) {
+        this._data.edgesColor = value;
+        this.notifierChangeEvent();
+    }
+    get facesColor() {
+        return this._data.facesColor;
+    }
+    set facesColor(value) {
+        this._data.facesColor = value;
+        this.notifierChangeEvent();
+    }
+    get edgesVisibility() {
+        return this._data.edgesVisibility;
+    }
+    set edgesVisibility(value) {
+        this._data.edgesVisibility = value;
+        this.notifierChangeEvent();
+    }
+    get edgesOverlap() {
+        return this._data.edgesOverlap;
+    }
+    set edgesOverlap(value) {
+        this._data.edgesOverlap = value;
+        this.notifierChangeEvent();
+    }
+    get facesOverlap() {
+        return this._data.facesOverlap;
+    }
+    set facesOverlap(value) {
+        this._data.facesOverlap = value;
+        this.notifierChangeEvent();
+    }
+    get facesTransparancy() {
+        return this._data.facesTransparancy;
+    }
+    set facesTransparancy(value) {
+        this._data.facesTransparancy = value;
+        this.notifierChangeEvent();
+    }
+    get enableCustomHighlight() {
+        return this._data.enableCustomHighlight;
+    }
+    set enableCustomHighlight(value) {
+        this._data.enableCustomHighlight = value;
+        this.notifierChangeEvent();
+    }
+    get sceneGraph() {
+        return this._data.sceneGraph;
+    }
+    set sceneGraph(value) {
+        this._data.sceneGraph = value;
+        if (value) this._data.enablePartialMode = false;
+        this.notifierChangeEvent();
+    }
+    get edgeModel() {
+        return Boolean(this._data.edgeModel);
+    }
+    set edgeModel(value) {
+        this._data.edgeModel = Boolean(value);
+        this.notifierChangeEvent();
+    }
+    get reverseZoomWheel() {
+        return this._data.reverseZoomWheel;
+    }
+    set reverseZoomWheel(value) {
+        this._data.reverseZoomWheel = !!value;
+        this.notifierChangeEvent();
+    }
+    get enableZoomWheel() {
+        return this._data.enableZoomWheel;
+    }
+    set enableZoomWheel(value) {
+        this._data.enableZoomWheel = !!value;
+        this.notifierChangeEvent();
+    }
+    get enableGestures() {
+        return this._data.enableGestures;
+    }
+    set enableGestures(value) {
+        this._data.enableGestures = !!value;
+        this.notifierChangeEvent();
+    }
+    get geometryType() {
+        return this._data.geometryType;
+    }
+    set geometryType(value) {
+        this._data.geometryType = value;
+        this.notifierChangeEvent();
+    }
+}
+
+const CANVAS_EVENTS = [ "click", "dblclick", "mousedown", "mousemove", "mouseup", "mouseleave", "pointerdown", "pointermove", "pointerup", "pointerleave", "pointercancel", "wheel", "touchstart", "touchmove", "touchend", "touchcancel" ];
+
+class EventEmitter2 {
+    constructor() {
+        this._listeners = undefined;
+    }
+    addEventListener(type, listener) {
+        if (this._listeners === undefined) this._listeners = {};
+        if (this._listeners[type] === undefined) this._listeners[type] = [];
+        this._listeners[type].push(listener);
+        return this;
+    }
+    removeEventListener(type, listener) {
+        if (this._listeners === undefined) return this;
+        if (this._listeners[type] === undefined) return this;
+        const listeners = this._listeners[type].filter((x => x !== listener));
+        this._listeners[type] = listeners.length === 0 ? undefined : listeners;
+        return this;
+    }
+    removeAllListeners(type) {
+        if (type) this._listeners[type] = undefined; else this._listeners = undefined;
+        return this;
+    }
+    emitEvent(event) {
+        if (this._listeners === undefined) return false;
+        if (this._listeners[event.type] === undefined) return false;
+        const invoke = this._listeners[event.type].slice();
+        invoke.forEach((listener => listener.call(this, event)));
+        return true;
+    }
+    on(type, listener) {
+        return this.addEventListener(type, listener);
+    }
+    off(type, listener) {
+        return this.removeEventListener(type, listener);
+    }
+    emit(event, ...args) {
+        if (typeof event === "string") return this.emitEvent({
+            type: event,
+            args: args
+        }); else if (typeof event === "object") return this.emitEvent(event); else return false;
+    }
+}
+
+class GLTFLoadingManager extends THREE.LoadingManager {
+    constructor(file, externalData = new Map, params = {}) {
+        super();
+        this.path = "";
+        this.resourcePath = "";
+        this.fileURL = "";
+        this.dataURLs = new Map;
+        this.path = params.path || "";
+        if (typeof file === "string") {
+            this.fileURL = file;
+            this.resourcePath = THREE.LoaderUtils.extractUrlBase(file);
+        } else {
+            externalData.forEach(((value, key) => this.fileURL = value === file ? key : this.fileURL));
+            externalData.set(this.fileURL, file);
+        }
+        externalData.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 => {
+            const key = decodeURI(url).replace(this.path, "").replace(this.resourcePath, "").replace(/^(\.?\/)/, "");
+            const dataURL = this.dataURLs.get(key);
+            return dataURL !== null && dataURL !== void 0 ? dataURL : url;
+        }));
+    }
+    dispose() {
+        this.dataURLs.forEach(URL.revokeObjectURL);
+    }
+}
+
+class OrbitDragger extends OrbitControls {
+    constructor(viewer) {
+        super(viewer.camera, viewer.canvas);
+        this.geometryEnd = event => {
+            const {data: scene} = event;
+            const box = (new THREE.Box3).setFromObject(scene);
+            const size = box.getSize(new THREE.Vector3).length();
+            this.maxDistance = size * 10;
+            this.update();
+        };
+        this.updateViewer = () => {
+            this.viewer.update();
+        };
+        this.mouseButtons = {
+            LEFT: THREE.MOUSE.ROTATE,
+            MIDDLE: THREE.MOUSE.PAN,
+            RIGHT: THREE.MOUSE.PAN
+        };
+        this.touches = {
+            ONE: THREE.TOUCH.ROTATE,
+            TWO: THREE.TOUCH.DOLLY_PAN
+        };
+        this.screenSpacePanning = true;
+        this.rotateSpeed = .33;
+        this.viewer = viewer;
+        this.viewer.addEventListener("geometryend", this.geometryEnd);
+        this.addEventListener("change", this.updateViewer);
+    }
+    dispose() {
+        this.removeEventListener("change", this.updateViewer);
+        this.viewer.removeEventListener("geometryend", this.geometryEnd);
+        super.dispose();
+    }
+}
+
+class PanDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.mouseButtons = {
+            LEFT: THREE.MOUSE.PAN,
+            MIDDLE: THREE.MOUSE.PAN,
+            RIGHT: THREE.MOUSE.PAN
+        };
+        this.touches = {
+            ONE: THREE.TOUCH.PAN,
+            TWO: THREE.TOUCH.DOLLY_ROTATE
+        };
+    }
+}
+
+class ZoomDragger extends OrbitDragger {
+    constructor(viewer) {
+        super(viewer);
+        this.mouseButtons = {
+            LEFT: THREE.MOUSE.DOLLY,
+            MIDDLE: THREE.MOUSE.PAN,
+            RIGHT: THREE.MOUSE.PAN
+        };
+        this.touches = {
+            ONE: THREE.TOUCH.DOLLY_PAN,
+            TWO: THREE.TOUCH.DOLLY_PAN
+        };
+    }
+}
+
+class WalkDragger {
+    constructor(viewer) {
+        this.onKeyDown = event => {
+            switch (event.code) {
+              case "KeyW":
+                if (event.shiftKey) {
+                    this.speed.z = this.walkSpeed * this.boostSpeed;
+                } else {
+                    this.speed.z = this.walkSpeed;
+                }
+                break;
+
+              case "KeyS":
+                if (event.shiftKey) {
+                    this.speed.z = -this.walkSpeed * this.boostSpeed;
+                } else {
+                    this.speed.z = -this.walkSpeed;
+                }
+                break;
+
+              case "KeyA":
+                if (event.shiftKey) {
+                    this.speed.x = this.walkSpeed * this.boostSpeed;
+                } else {
+                    this.speed.x = this.walkSpeed;
+                }
+                break;
+
+              case "KeyD":
+                if (event.shiftKey) {
+                    this.speed.x = -this.walkSpeed * this.boostSpeed;
+                } else {
+                    this.speed.x = -this.walkSpeed;
+                }
+                break;
+            }
+        };
+        this.onKeyUp = event => {
+            switch (event.code) {
+              case "KeyW":
+                this.speed.z = 0;
+                break;
+
+              case "KeyS":
+                this.speed.z = 0;
+                break;
+
+              case "KeyA":
+                this.speed.x = 0;
+                break;
+
+              case "KeyD":
+                this.speed.x = 0;
+                break;
+            }
+        };
+        this.onMouseDown = event => {
+            const {clientX: clientX, clientY: clientY} = event;
+            this.mouseStart.set(clientX, clientY);
+            this.mouseDelta.set(0, 0);
+            this.quaternion.copy(this.viewer.camera.quaternion);
+            this.viewer.addEventListener("mousemove", this.onMouseMove);
+        };
+        this.onMouseMove = event => {
+            const {clientX: clientX, clientY: clientY} = event;
+            this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
+            this.rotateCamera(this.mouseDelta);
+        };
+        this.onMouseUp = event => {
+            this.speed.set(0, 0, 0);
+            this.mouseStart.set(0, 0);
+            this.mouseDelta.set(0, 0);
+            this.quaternion.copy(this.viewer.camera.quaternion);
+            this.viewer.removeEventListener("mousemove", this.onMouseMove);
+        };
+        this.onMouseWheel = event => {
+            event.preventDefault();
+            if (-event.deltaY < 0) {
+                this.walkSpeed = Math.max(.001, this.walkSpeed - 1);
+            } else if (-event.deltaY > 0) {
+                this.walkSpeed++;
+            }
+        };
+        this.onContextMenu = event => {
+            console.log(event);
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        };
+        this.onTouchStart = event => {
+            if (event.touches.length > 1) {
+                this.touchStartDistance = this.getTouchsDistance(event.touches);
+            } else {
+                const {clientX: clientX, clientY: clientY} = event.touches[0];
+                this.mouseStart.set(clientX, clientY);
+                this.mouseDelta.set(0, 0);
+                this.quaternion.copy(this.viewer.camera.quaternion);
+            }
+        };
+        this.onTouchEnd = event => {
+            if (event.touches.length === 0) {
+                this.touchStartDistance = 0;
+            }
+            this.speed.set(0, 0, 0);
+            this.mouseStart.set(0, 0);
+            this.mouseDelta.set(0, 0);
+            this.quaternion.copy(this.viewer.camera.quaternion);
+        };
+        this.onTouchMove = event => {
+            if (event.touches.length === 1 && this.touchStartDistance === 0) {
+                const {clientX: clientX, clientY: clientY} = event.touches[0];
+                this.mouseDelta.set(this.mouseStart.x - clientX, this.mouseStart.y - clientY);
+                this.rotateCamera(this.mouseDelta);
+            }
+            if (event.touches.length === 2) {
+                const distance = this.getTouchsDistance(event.touches);
+                this.speed.z = (distance - this.touchStartDistance) / 2;
+            }
+        };
+        this.onRender = event => {
+            this.viewer.camera.matrix.extractBasis(this.xAxis, this.yAxis, this.zAxis);
+            this.viewer.camera.position.add(this.zAxis.multiplyScalar(-event.deltaTime * this.speed.z));
+            this.viewer.camera.position.add(this.xAxis.multiplyScalar(-event.deltaTime * this.speed.x));
+        };
+        this.viewer = viewer;
+        this._target = new THREE.Vector3;
+        this.quaternion = this.viewer.camera.quaternion.clone();
+        this.xRotation = new THREE.Quaternion;
+        this.yRotation = new THREE.Quaternion;
+        this.mouseStart = new THREE.Vector2;
+        this.mouseDelta = new THREE.Vector2;
+        this.xAxis = new THREE.Vector3;
+        this.yAxis = new THREE.Vector3;
+        this.zAxis = new THREE.Vector3;
+        this.yRotationAxis = new THREE.Vector3(1, 0, 0);
+        this.walkSpeed = 1;
+        this.boostSpeed = 5;
+        this.speed = new THREE.Vector3;
+        this._maxDistance = 1;
+        this.touchStartDistance = 0;
+        this.viewer.addEventListener("render", this.onRender);
+        this.viewer.addEventListener("contextmenu", this.onContextMenu);
+        this.viewer.addEventListener("mousedown", this.onMouseDown);
+        this.viewer.addEventListener("mouseup", this.onMouseUp);
+        this.viewer.addEventListener("touchstart", this.onTouchStart);
+        this.viewer.addEventListener("touchmove", this.onTouchMove);
+        this.viewer.addEventListener("touchend", this.onTouchEnd);
+        this.viewer.addEventListener("wheel", this.onMouseWheel);
+        document.addEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keyup", this.onKeyUp);
+    }
+    dispose() {
+        this.viewer.removeEventListener("render", this.onRender);
+        this.viewer.removeEventListener("contextmenu", this.onContextMenu);
+        this.viewer.removeEventListener("mousedown", this.onMouseDown);
+        this.viewer.removeEventListener("mouseup", this.onMouseUp);
+        this.viewer.removeEventListener("mousemove", this.onMouseMove);
+        this.viewer.removeEventListener("touchstart", this.onTouchStart);
+        this.viewer.removeEventListener("touchmove", this.onTouchMove);
+        this.viewer.removeEventListener("touchend", this.onTouchEnd);
+        this.viewer.removeEventListener("wheel", this.onMouseWheel);
+        document.removeEventListener("keydown", this.onKeyDown);
+        document.removeEventListener("keyup", this.onKeyUp);
+    }
+    getTouchsDistance(touches) {
+        const [start, end] = touches;
+        const dx = start.clientX - end.clientX;
+        const dy = start.clientY - end.clientY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        return distance;
+    }
+    update() {}
+    rotateCamera(delta) {
+        const rotateX = Math.PI * delta.x / this.viewer.canvas.clientWidth;
+        const rotateY = Math.PI * delta.y / this.viewer.canvas.clientHeight;
+        const quaternion = this.quaternion.clone();
+        this.xRotation.setFromAxisAngle(this.viewer.camera.up, rotateX);
+        this.yRotation.setFromAxisAngle(this.yRotationAxis, rotateY);
+        quaternion.premultiply(this.xRotation).multiply(this.yRotation).normalize();
+        this.viewer.camera.setRotationFromQuaternion(quaternion);
+    }
+}
+
+class ClippingPlaneDragger {
+    constructor(viewer) {
+        this.onPointerDown = event => {
+            this.viewer.addEventListener("pointermove", this.onPointerMove);
+            const {offsetX: offsetX, offsetY: offsetY} = event;
+            this.start.set(offsetX, offsetY, .5);
+            this.start = this.screenToPlane(this.start);
+            this.delta.set(0, 0, 0);
+            this.end.set(0, 0, 0);
+        };
+        this.onPointerUp = event => {
+            this.viewer.removeEventListener("pointermove", this.onPointerMove);
+            if (this.end.length() === 0) {
+                const plane = this.plane;
+                plane.normal.multiplyScalar(-1);
+                plane.constant *= -1;
+            } else {
+                const {offsetX: offsetX, offsetY: offsetY} = event;
+                this.end.set(offsetX, offsetY, .5);
+                this.end = this.screenToPlane(this.end);
+            }
+        };
+        this.onPointerMove = event => {
+            const {offsetX: offsetX, offsetY: offsetY} = event;
+            this.end.set(offsetX, offsetY, .5);
+            this.end = this.screenToPlane(this.end);
+            this.delta.copy(this.end).sub(this.start);
+            this.start.copy(this.end);
+            const plane = this.plane;
+            plane.translate(this.delta);
+        };
+        this.viewer = viewer;
+        this.viewer.addEventListener("pointerdown", this.onPointerDown);
+        this.viewer.addEventListener("pointerup", this.onPointerUp);
+        this.plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+        this.start = new THREE.Vector3;
+        this.end = new THREE.Vector3;
+        this.delta = new THREE.Vector3;
+        if (!this.viewer.renderer.clippingPlanes) this.viewer.renderer.clippingPlanes = [];
+        this.viewer.renderer.clippingPlanes.push(this.plane);
+        this.planeHelper = new THREE.PlaneHelper(this.plane, 150, 16776960);
+        this.viewer.scene.add(this.planeHelper);
+    }
+    dispose() {
+        this.viewer.removeEventListener("pointerdown", this.onPointerDown);
+        this.viewer.removeEventListener("pointerup", this.onPointerUp);
+        this.viewer.removeEventListener("pointermove", this.onPointerMove);
+        this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane => this.plane !== plane));
+        this.planeHelper.removeFromParent();
+    }
+    update() {}
+    screenToWorld(v) {
+        v.x = 2 * v.x / this.viewer.canvas.clientWidth - 1;
+        v.y = 1 - 2 * v.y / this.viewer.canvas.clientHeight;
+        return v.unproject(this.viewer.camera);
+    }
+    screenToPlane(v) {
+        v = this.screenToWorld(v);
+        const direction = v.sub(this.viewer.camera.position).normalize();
+        const ray = new THREE.Ray(this.viewer.camera.position, direction);
+        let plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+        const dot = plane.normal.dot(this.plane.normal);
+        if (Math.abs(dot) === 1) {
+            plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
+        }
+        const result = new THREE.Vector3;
+        ray.intersectPlane(plane, result);
+        return result;
+    }
+}
+
+class LightComponent {
+    constructor(viewer) {
+        this.viewer = viewer;
+        this.ambientLight = new THREE.AmbientLight(16777215, 0);
+        this.viewer.camera.add(this.ambientLight);
+        this.directLight = new THREE.DirectionalLight(16777215, 1);
+        this.directLight.position.set(.5, 0, .866);
+        this.viewer.camera.add(this.directLight);
+    }
+    dispose() {
+        this.ambientLight.removeFromParent();
+        this.directLight.removeFromParent();
+    }
+}
+
+class BackgroundComponent {
+    constructor(viewer) {
+        this.syncOptions = () => {
+            this.backgroundColor.setHex(16777215);
+        };
+        this.viewer = viewer;
+        this.backgroundColor = new THREE.Color(16777215);
+        const environment = new RoomEnvironment;
+        const pmremGenerator = new THREE.PMREMGenerator(this.viewer.renderer);
+        this.viewer.scene.background = this.backgroundColor;
+        this.viewer.scene.environment = pmremGenerator.fromScene(environment).texture;
+        this.viewer.addEventListener("optionschange", this.syncOptions);
+        environment.dispose();
+    }
+    dispose() {
+        this.viewer.removeEventListener("optionschange", this.syncOptions);
+        this.viewer.scene.environment = undefined;
+        this.viewer.scene.background = undefined;
+    }
+}
+
+class DefaultCameraPositionComponent {
+    constructor(viewer) {
+        this.geometryEnd = event => {
+            const {data: scene} = event;
+            scene.updateMatrixWorld();
+            const box = (new THREE.Box3).setFromObject(scene);
+            const size = box.getSize(new THREE.Vector3).length();
+            const center = box.getCenter(new THREE.Vector3);
+            scene.position.x += scene.position.x - center.x;
+            scene.position.y += scene.position.y - center.y;
+            scene.position.z += scene.position.z - center.z;
+            this.viewer.camera.near = size / 100;
+            this.viewer.camera.far = size * 100;
+            this.viewer.camera.position.copy(center);
+            this.viewer.camera.position.x += size / 2;
+            this.viewer.camera.position.y += size / 5;
+            this.viewer.camera.position.z += size / 2;
+            this.viewer.camera.updateMatrixWorld();
+            this.viewer.camera.updateProjectionMatrix();
+            this.viewer.camera.lookAt(center);
+        };
+        this.viewer = viewer;
+        this.viewer.addEventListener("geometryend", this.geometryEnd);
+    }
+    dispose() {
+        this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    }
+}
+
+class ResizeCanvasComponent {
+    constructor(viewer) {
+        this.resizeViewer = entries => {
+            const {width: width, height: height} = entries[0].contentRect;
+            if (!width || !height) return;
+            this.viewer.camera.aspect = width / height;
+            this.viewer.camera.updateProjectionMatrix();
+            this.viewer.renderer.setSize(width, height, true);
+            this.viewer.update(true);
+            this.viewer.emitEvent({
+                type: "resize",
+                width: width,
+                height: height
+            });
+        };
+        this.viewer = viewer;
+        this.resizeObserver = new ResizeObserver(this.resizeViewer);
+        this.resizeObserver.observe(viewer.canvas.parentElement);
+    }
+    dispose() {
+        this.resizeObserver.disconnect();
+    }
+}
+
+class RenderLoopComponent {
+    constructor(viewer) {
+        this.animate = (time = 0) => {
+            this.requestID = requestAnimationFrame(this.animate);
+            this.viewer.render(time);
+        };
+        this.viewer = viewer;
+        this.animate();
+    }
+    dispose() {
+        cancelAnimationFrame(this.requestID);
+    }
+}
+
+class ThreejsViewer extends EventEmitter2 {
+    constructor(client) {
+        super();
+        this._options = new Options(this);
+        this.client = client;
+        this.canvasEvents = CANVAS_EVENTS;
+        this.canvaseventlistener = event => this.emit(event);
+        this.draggerFactory = {
+            Pan: PanDragger,
+            Zoom: ZoomDragger,
+            Orbit: OrbitDragger,
+            Walk: WalkDragger,
+            Clipping: ClippingPlaneDragger
+        };
+        this._activeDragger = null;
+        this.models = [];
+        this.components = [];
+        this.selectedObjects = [];
+        this.renderTime = 0;
+        this.render = this.render.bind(this);
+        this.update = this.update.bind(this);
+    }
+    get options() {
+        return this._options;
+    }
+    get draggers() {
+        return Object.keys(this.draggerFactory);
+    }
+    initialize(canvas, onProgress) {
+        this.addEventListener("optionschange", (event => this.syncOptions(event.data)));
+        this.scene = new THREE.Scene;
+        const rect = canvas.parentElement.getBoundingClientRect();
+        const width = rect.width || 1;
+        const height = rect.height || 1;
+        this.camera = new THREE.PerspectiveCamera(45, width / height, .01, 1e3);
+        this.camera.up.set(0, 0, 1);
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: canvas,
+            antialias: true
+        });
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setSize(width, height);
+        this.renderer.toneMapping = THREE.LinearToneMapping;
+        this.canvas = canvas;
+        this.canvasEvents.forEach((x => canvas.addEventListener(x, this.canvaseventlistener)));
+        this.components.push(new LightComponent(this));
+        this.components.push(new BackgroundComponent(this));
+        this.components.push(new DefaultCameraPositionComponent(this));
+        this.components.push(new ResizeCanvasComponent(this));
+        this.components.push(new RenderLoopComponent(this));
+        this.options.notifierChangeEvent();
+        this.renderTime = performance.now();
+        this.render(this.renderTime);
+        if (typeof onProgress === "function") onProgress(new ProgressEvent("progress", {
+            lengthComputable: true,
+            loaded: 1,
+            total: 1
+        }));
+        return Promise.resolve(this);
+    }
+    dispose() {
+        this.cancel();
+        this.emitEvent({
+            type: "dispose"
+        });
+        this.components.forEach((component => component.dispose()));
+        this.components = [];
+        this.setActiveDragger("");
+        this.removeAllListeners();
+        if (this.canvas) {
+            this.canvasEvents.forEach((x => this.canvas.removeEventListener(x, this.canvaseventlistener)));
+            this.canvas = undefined;
+        }
+        if (this.renderer) this.renderer.dispose();
+        this.renderer = undefined;
+        this.camera = undefined;
+        this.scene = undefined;
+        return this;
+    }
+    isInitialized() {
+        return !!this.renderer;
+    }
+    render(time) {
+        if (!this.renderNeeded) return;
+        if (!this.renderer) return;
+        this.renderer.render(this.scene, this.camera);
+        this.renderNeeded = false;
+        const deltaTime = (time - this.renderTime) / 1e3;
+        this.renderTime = time;
+        this.emitEvent({
+            type: "render",
+            time: time,
+            deltaTime: deltaTime
+        });
+    }
+    update(force = false) {
+        this.renderNeeded = true;
+        if (force) this.render(performance.now());
+        this.emitEvent({
+            type: "update",
+            data: force
+        });
+    }
+    syncOptions(options = this.options.data) {}
+    loadReferences(model) {
+        return Promise.resolve(this);
+    }
+    async open(file) {
+        if (!this.renderer) return this;
+        this.cancel();
+        this.clear();
+        this.emitEvent({
+            type: "open",
+            file: file,
+            model: file
+        });
+        let model;
+        if (file) {
+            const models = await file.getModels() || [];
+            model = models.find((model => model.default)) || models[0];
+        }
+        if (!model) throw new Error("No default model found");
+        const geometryType = model.database.split(".").pop();
+        if (geometryType !== "gltf") throw new Error(`Unknown geometry type: ${geometryType}`);
+        const url = `${model.httpClient.serverUrl}${model.path}/${model.database}`;
+        const params = {
+            requestHeader: model.httpClient.headers
+        };
+        await this.loadReferences(model);
+        await this.loadGltfFile(url, undefined, params);
+        return this;
+    }
+    cancel() {
+        this.emitEvent({
+            type: "cancel"
+        });
+        return this;
+    }
+    openGltfFile(file, externalData = new Map, params = {}) {
+        if (!this.renderer) return Promise.resolve(this);
+        this.cancel();
+        this.clear();
+        this.emitEvent({
+            type: "open"
+        });
+        return this.loadGltfFile(file, externalData, params);
+    }
+    async loadGltfFile(file, externalData = new Map, params = {}) {
+        const manager = new GLTFLoadingManager(file, externalData, params);
+        try {
+            this.emitEvent({
+                type: "geometrystart"
+            });
+            const loader = new GLTFLoader(manager);
+            loader.setPath(manager.path);
+            loader.setRequestHeader(params.requestHeader);
+            loader.setCrossOrigin(params.crossOrigin || loader.crossOrigin);
+            loader.setWithCredentials(params.withCredentials || loader.withCredentials);
+            const gltf = await loader.loadAsync(manager.fileURL, (event => {
+                const {lengthComputable: lengthComputable, loaded: loaded, total: total} = event;
+                const progress = lengthComputable ? loaded / total : 1;
+                this.emitEvent({
+                    type: "geometryprogress",
+                    data: progress
+                });
+            }));
+            if (!this.scene) return this;
+            if (!gltf.scene) throw new Error("No glTF scene found");
+            this.models.push(gltf);
+            this.scene.add(gltf.scene);
+            this.update();
+            this.emitEvent({
+                type: "databasechunk"
+            });
+            this.emitEvent({
+                type: "geometryend",
+                data: gltf.scene
+            });
+        } catch (error) {
+            this.emitEvent({
+                type: "geometryerror",
+                data: error
+            });
+            throw error;
+        } finally {
+            manager.dispose();
+        }
+        return this;
+    }
+    clear() {
+        function disposeMaterial(material) {
+            const materials = Array.isArray(material) ? material : [ material ];
+            materials.forEach((material => {
+                material.dispose();
+            }));
+        }
+        function disposeObject(object) {
+            if (object.geometry) object.geometry.dispose();
+            if (object.material) disposeMaterial(object.material);
+        }
+        this.selectedObjects = [];
+        this.models.forEach((gltf => gltf.scene.traverse(disposeObject)));
+        this.models.forEach((gltf => gltf.scene.removeFromParent()));
+        this.models = [];
+        this.update();
+        this.emitEvent({
+            type: "clear"
+        });
+        return this;
+    }
+    activeDragger() {
+        return this._activeDragger;
+    }
+    setActiveDragger(name) {
+        if (!this._activeDragger || this._activeDragger.name !== name) {
+            if (this._activeDragger) {
+                this._activeDragger.dispose();
+                this._activeDragger = null;
+            }
+            const Constructor = this.draggerFactory[name];
+            if (Constructor) {
+                this._activeDragger = new Constructor(this);
+                this._activeDragger.name = name;
+            }
+        }
+        return this._activeDragger;
+    }
+    resetActiveDragger() {
+        const dragger = this._activeDragger;
+        if (dragger) {
+            this.setActiveDragger("");
+            this.setActiveDragger(dragger.name);
+        }
+    }
+    is3D() {
+        return false;
+    }
+    executeCommand(id, ...args) {
+        return commands("ThreeJS").executeCommand(id, this, ...args);
+    }
+    drawViewpoint(viewpoint) {}
+    createViewpoint() {
+        return {};
+    }
+}
+
+export { ThreejsViewer as Viewer, commands };
+//# sourceMappingURL=viewer-three.module.js.map