@inweb/viewer-three 26.9.0 → 26.9.2

package/lib/Viewer/Viewer.d.ts

@@ -38,8 +38,8 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     target: Vector3;
     private _activeDragger;
     private _components;
-    private renderNeeded;
-    private renderTime;
+    private _renderNeeded;
+    private _renderTime;
     private _markup;
     /**
      * @param client - The `Client` instance that is used to load model reference files from the Open Cloud
@@ -59,6 +59,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     initialize(canvas: HTMLCanvasElement, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<this>;
     dispose(): this;
     isInitialized(): boolean;
+    setSize(width: number, height: number, updateStyle?: boolean): void;
     update(force?: boolean): void;
     render(time?: DOMHighResTimeStamp, force?: boolean): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;

package/lib/Viewer/commands/SetDefaultViewPosition.d.ts

@@ -7,9 +7,9 @@ export declare const defaultViewPositions: {
     right: Vector3;
     bottom: Vector3;
     top: Vector3;
-    ns: Vector3;
+    se: Vector3;
     sw: Vector3;
+    ne: Vector3;
     nw: Vector3;
-    se: Vector3;
 };
 export declare function setDefaultViewPosition(viewer: Viewer, position: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.9.0",
+  "version": "26.9.2",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,13 +35,14 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.9.0",
-    "@inweb/eventemitter2": "~26.9.0",
-    "@inweb/markup": "~26.9.0",
-    "@inweb/viewer-core": "~26.9.0"
+    "@inweb/client": "~26.9.2",
+    "@inweb/eventemitter2": "~26.9.2",
+    "@inweb/markup": "~26.9.2",
+    "@inweb/viewer-core": "~26.9.2"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",
+    "potree-core": "^2.0.11",
     "three": "^0.179.1"
   },
   "peerDependencies": {

package/plugins/components/AxesHelperComponent.ts

@@ -32,7 +32,9 @@ class AxesHelperComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.axesHelper1 = new AxesHelper();
     this.axesHelper2 = new AxesHelper();
+
     this.viewer = viewer;
+    this.viewer.addEventListener("initialize", this.syncHelper);
     this.viewer.addEventListener("geometryend", this.syncHelper);
     this.viewer.addEventListener("clear", this.syncHelper);
   }
@@ -44,6 +46,7 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2.removeFromParent();
     this.axesHelper2.dispose();
 
+    this.viewer.removeEventListener("initialize", this.syncHelper);
     this.viewer.removeEventListener("geometryend", this.syncHelper);
     this.viewer.removeEventListener("clear", this.syncHelper);
   }
@@ -55,17 +58,18 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper2.removeFromParent();
     this.axesHelper2.dispose();
 
-    if (this.viewer.extents.isEmpty()) return;
-
     const size = this.viewer.extents.getSize(new Vector3()).length();
     const center = this.viewer.extents.getCenter(new Vector3());
 
-    this.axesHelper1 = new AxesHelper(size);
-    this.axesHelper1.position.copy(center);
+    this.axesHelper1 = new AxesHelper(size || 1);
+    this.axesHelper2 = new AxesHelper(size);
+
+    this.axesHelper1.position.set(0, 0, 0);
     this.viewer.helpers.add(this.axesHelper1);
 
-    this.axesHelper2 = new AxesHelper(size);
-    this.axesHelper2.position.set(0, 0, 0);
+    if (this.viewer.extents.isEmpty()) return;
+
+    this.axesHelper2.position.copy(center);
     this.viewer.helpers.add(this.axesHelper2);
   };
 }

package/plugins/loaders/{IFCXCloudLoader.ts → IFCX/IFCXCloudLoader.ts}

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
-import { parse, clear } from "./IFCX/render.js";
+import { parse, clear } from "./render.js";
 
 export class IFCXCloudLoader extends Loader {
   public viewer: Viewer;

package/plugins/loaders/{IFCXFileLoader.ts → IFCX/IFCXFileLoader.ts}

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { GLTFLoadingManager, GLTFLoadParams, Loader, ModelImpl, Viewer } from "@inweb/viewer-three";
-import { IFCXLoader } from "./IFCX/IFCXLoader";
+import { IFCXLoader } from "./IFCXLoader";
 
 export class IFCXFileLoader extends Loader {
   public viewer: Viewer;

package/plugins/loaders/Potree/PotreeFileLoader.ts

@@ -0,0 +1,106 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Euler, Vector3 } from "three";
+import { PointColorType, PointCloudOctree, PointSizeType, PointShape, Potree } from "potree-core";
+import { Loader, Viewer } from "@inweb/viewer-three";
+
+import { PotreeModelImpl } from "./PotreeModelImpl";
+
+export type PotreeLoadParams = {
+  path?: string;
+  position?: Vector3;
+  rotation?: Euler;
+  scale?: Vector3;
+};
+
+export class PotreeFileLoader extends Loader {
+  public viewer: Viewer;
+  public potree: Potree;
+  public pointClouds: PointCloudOctree[];
+
+  constructor(viewer: Viewer) {
+    super();
+    this.viewer = viewer;
+
+    this.potree = new Potree();
+    this.pointClouds = [];
+
+    this.viewer.addEventListener("render", this.updatePointClouds);
+    this.viewer.addEventListener("changecamera", this.updatePointClouds);
+  }
+
+  override dispose() {
+    this.pointClouds.forEach((pco) => pco.dispose());
+
+    this.viewer.removeEventListener("render", this.updatePointClouds);
+    this.viewer.removeEventListener("changecamera", this.updatePointClouds);
+  }
+
+  override isSupport(file: any, format?: string): boolean {
+    return typeof file === "string" && /(cloud.js|metadata.json)$/i.test(file);
+  }
+
+  override async load(file: any, format?: string, params: PotreeLoadParams = {}): Promise<this> {
+    const path = (params.path || "") + file;
+    const index = path.lastIndexOf("/");
+    const baseUrl = path.slice(0, index + 1);
+    const url = path.slice(index + 1);
+
+    const pco = await this.potree.loadPointCloud(url, baseUrl);
+    pco.material.size = 1.0;
+    pco.material.shape = 2;
+    pco.material.inputColorEncoding = 1;
+    pco.material.outputColorEncoding = 1;
+    pco.material.pointColorType = PointColorType.RGB; // RGB | DEPTH | HEIGHT | POINT_INDEX | LOD | CLASSIFICATION
+    pco.material.pointSizeType = PointSizeType.ADAPTIVE; // ADAPTIVE | FIXED
+    pco.material.shape = PointShape.CIRCLE; // CIRCLE | SQUARE
+
+    if (params.position) pco.position.copy(params.position);
+    if (params.rotation) pco.rotation.copy(params.rotation);
+    if (params.scale) pco.scale.copy(params.scale);
+
+    this.pointClouds.push(pco);
+
+    const modelImpl = new PotreeModelImpl(pco);
+    modelImpl.loader = this;
+    modelImpl.viewer = this.viewer;
+    modelImpl.pco = pco;
+
+    this.viewer.scene.add(pco);
+    this.viewer.models.push(modelImpl);
+
+    this.viewer.syncOptions();
+    this.viewer.syncOverlay();
+    this.viewer.update();
+
+    this.viewer.emitEvent({ type: "databasechunk", data: pco, file });
+
+    return this;
+  }
+
+  updatePointClouds = () => {
+    const result = this.potree.updatePointClouds(this.pointClouds, this.viewer.camera, this.viewer.renderer);
+    if (result.exceededMaxLoadsToGPU || result.nodeLoadPromises.length > 0) this.viewer.update();
+  };
+}

package/plugins/loaders/Potree/PotreeModelImpl.ts

@@ -0,0 +1,36 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Box3 } from "three";
+import { PointCloudOctree } from "potree-core";
+import { ModelImpl } from "@inweb/viewer-three";
+
+// Potree model implementation.
+
+export class PotreeModelImpl extends ModelImpl {
+  public pco: PointCloudOctree;
+
+  override getExtents(target: Box3): Box3 {
+    return target.union(this.pco.pcoGeometry.boundingBox);
+  }
+}

package/plugins/loaders/Potree/index.ts

@@ -0,0 +1,28 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { loaders } from "@inweb/viewer-three";
+
+import { PotreeFileLoader } from "./PotreeFileLoader";
+
+loaders.registerLoader("potree-file", (viewer: any) => new PotreeFileLoader(viewer));

package/src/Viewer/Viewer.ts

@@ -108,8 +108,8 @@ export class Viewer
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
-  private renderNeeded: boolean;
-  private renderTime: DOMHighResTimeStamp;
+  private _renderNeeded: boolean;
+  private _renderTime: DOMHighResTimeStamp;
 
   private _markup: IMarkup;
 
@@ -136,7 +136,7 @@ export class Viewer
     this._activeDragger = null;
     this._components = [];
 
-    this.renderTime = 0;
+    this._renderTime = 0;
 
     this.render = this.render.bind(this);
     this.update = this.update.bind(this);
@@ -170,7 +170,7 @@ export class Viewer
 
     this.scene = new Scene();
     this.helpers = new Helpers();
-    this.target = new Vector3();
+    this.target = new Vector3(0, 0, 0);
 
     const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
@@ -178,7 +178,7 @@ export class Viewer
     const height = rect.height || 1;
     const aspect = width / height;
 
-    this.camera = new PerspectiveCamera(45, aspect, 0.01, 1000);
+    this.camera = new PerspectiveCamera(45, aspect, 0.001, 1000);
     this.camera.up.set(0, 1, 0);
     this.camera.position.set(0, 0, 1);
     this.camera.lookAt(this.target);
@@ -217,6 +217,7 @@ export class Viewer
     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));
@@ -230,8 +231,8 @@ export class Viewer
     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, total: 1 }));
@@ -289,21 +290,44 @@ export class Viewer
     return !!this.renderer;
   }
 
+  setSize(width: number, height: number, updateStyle = true) {
+    if (!this.renderer) return;
+
+    const camera = this.camera as any;
+    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, height });
+  }
+
   update(force = false): void {
-    this.renderNeeded = true;
+    this._renderNeeded = true;
     if (force) this.render();
     this.emitEvent({ type: "update", data: force });
   }
 
   render(time?: DOMHighResTimeStamp, force = false): void {
     if (!this.renderer) return;
-    if (!(this.renderNeeded || force)) return;
+    if (!this._renderNeeded && !force) return;
 
     if (!time) time = performance.now();
-    const deltaTime = (time - this.renderTime) / 1000;
+    const deltaTime = (time - this._renderTime) / 1000;
 
-    this.renderTime = time;
-    this.renderNeeded = false;
+    this._renderTime = time;
+    this._renderNeeded = false;
 
     if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
       this.renderer.render(this.scene, this.camera);
@@ -661,7 +685,7 @@ export class Viewer
         camera.left = camera.bottom * aspect;
         camera.right = camera.top * aspect;
         camera.near = 0;
-        camera.far = extentsSize * 100;
+        camera.far = extentsSize * 1000;
         camera.zoom = orthogonal_camera.view_to_world_scale;
         camera.updateProjectionMatrix();
 
@@ -686,8 +710,8 @@ export class Viewer
         const camera = new PerspectiveCamera();
         camera.fov = perspective_camera.field_of_view;
         camera.aspect = aspect;
-        camera.near = extentsSize / 100;
-        camera.far = extentsSize * 100;
+        camera.near = extentsSize / 1000;
+        camera.far = extentsSize * 1000;
         camera.updateProjectionMatrix();
 
         camera.up.copy(getVector3FromPoint3d(perspective_camera.up_vector));

package/src/Viewer/commands/SetDefaultViewPosition.ts

@@ -21,36 +21,40 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Sphere, Vector3 } from "three";
+import { Quaternion, Sphere, Vector3 } from "three";
 import type { Viewer } from "../Viewer";
 import { zoomTo } from "./ZoomTo";
 
 export const defaultViewPositions = {
-  front: new Vector3(0, 0, 1),
-  back: new Vector3(0, 0, -1),
-  left: new Vector3(-1, 0, 0),
-  right: new Vector3(1, 0, 0),
+  front: new Vector3(0, 0, -1),
+  back: new Vector3(0, 0, 1),
+  left: new Vector3(1, 0, 0),
+  right: new Vector3(-1, 0, 0),
   bottom: new Vector3(0, -1, 0),
   top: new Vector3(0, 1, 0),
-  ns: new Vector3(-0.5, 1.0, -0.5).normalize(),
-  sw: new Vector3(0.5, 1.0, -0.5).normalize(),
-  nw: new Vector3(0.5, 1.0, 0.5).normalize(),
-  se: new Vector3(-0.5, 1.0, 0.5).normalize(),
+  se: new Vector3(-1, 1, -1).normalize(),
+  sw: new Vector3(1, 1, -1).normalize(),
+  ne: new Vector3(-1, 1, 1).normalize(),
+  nw: new Vector3(1, 1, 1).normalize(),
 };
 
 export function setDefaultViewPosition(viewer: Viewer, position: string): void {
-  const direction = defaultViewPositions[position] || defaultViewPositions["sw"];
+  const extentsCenter = viewer.extents.getCenter(new Vector3());
+  const extentsSize = viewer.extents.getBoundingSphere(new Sphere()).radius * 2;
 
-  const center = viewer.extents.getCenter(new Vector3());
-  const sphere = viewer.extents.getBoundingSphere(new Sphere());
-  const offset = direction.clone().multiplyScalar(sphere.radius);
+  const upY = new Vector3(0, 1, 0);
+  const offsetY = defaultViewPositions[position] || defaultViewPositions["sw"];
+
+  const up = new Vector3().copy(viewer.camera.up);
+  const quaternion = new Quaternion().setFromUnitVectors(upY, up);
+  const offset = new Vector3().copy(offsetY).applyQuaternion(quaternion);
 
   const camera = viewer.camera;
-  camera.position.copy(center).add(offset);
-  camera.lookAt(center);
+  camera.position.copy(offset).multiplyScalar(extentsSize).add(extentsCenter);
+  camera.lookAt(extentsCenter);
   camera.updateMatrixWorld();
 
-  viewer.target.copy(center);
+  viewer.target.copy(extentsCenter);
 
   viewer.update();
   viewer.emit({ type: "viewposition", data: position });

package/src/Viewer/commands/ZoomTo.ts

@@ -27,8 +27,8 @@ import type { Viewer } from "../Viewer";
 export function zoomTo(viewer: Viewer, box: Box3): void {
   if (box.isEmpty()) return;
 
-  const center = box.getCenter(new Vector3());
-  const sphere = box.getBoundingSphere(new Sphere());
+  const boxCenter = box.getCenter(new Vector3());
+  const boxSize = box.getBoundingSphere(new Sphere()).radius;
 
   const rendererSize = viewer.renderer.getSize(new Vector2());
   const aspect = rendererSize.x / rendererSize.y;
@@ -36,30 +36,30 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   const camera = viewer.camera as any;
 
   if (camera.isPerspectiveCamera) {
-    const offset = new Vector3(0, 0, 1);
-    offset.applyQuaternion(camera.quaternion);
-    offset.multiplyScalar(sphere.radius / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
+    const offset = new Vector3(0, 0, 1)
+      .applyQuaternion(camera.quaternion)
+      .multiplyScalar(boxSize / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
 
-    camera.position.copy(center).add(offset);
+    camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();
   }
   if (camera.isOrthographicCamera) {
-    camera.top = sphere.radius;
-    camera.bottom = -sphere.radius;
+    camera.top = boxSize;
+    camera.bottom = -boxSize;
     camera.left = camera.bottom * aspect;
     camera.right = camera.top * aspect;
     camera.zoom = 1;
     camera.updateProjectionMatrix();
 
-    const offset = new Vector3(0, 0, 1);
-    offset.applyQuaternion(camera.quaternion);
-    offset.multiplyScalar(viewer.extents.getBoundingSphere(new Sphere()).radius * 3);
+    const offset = new Vector3(0, 0, 1)
+      .applyQuaternion(camera.quaternion)
+      .multiplyScalar(viewer.extents.getBoundingSphere(new Sphere()).radius * 3);
 
-    camera.position.copy(center).add(offset);
+    camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();
   }
 
-  viewer.target.copy(center);
+  viewer.target.copy(boxCenter);
 
   viewer.update();
   viewer.emitEvent({ type: "zoom" });

package/src/Viewer/components/ExtentsComponent.ts

@@ -55,6 +55,6 @@ export class ExtentsComponent implements IComponent {
     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);
   };
 }

package/src/Viewer/components/LightComponent.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { AmbientLight, DirectionalLight, HemisphereLight, Sphere, Vector3 } from "three";
+import { AmbientLight, DirectionalLight, HemisphereLight, Quaternion, Sphere, Vector3 } from "three";
 
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
@@ -73,13 +73,15 @@ export class LightComponent implements IComponent {
     const extentsCenter = this.viewer.extents.getCenter(new Vector3());
     const extentsSize = this.viewer.extents.getBoundingSphere(new Sphere()).radius;
 
-    const front = new Vector3()
-      .copy(this.viewer.camera.up)
-      .cross(new Vector3(1, 0, 0))
-      .negate();
+    const upY = new Vector3(0, 1, 0);
+    const frontY = new Vector3(0, 0, -1);
+
+    const up = new Vector3().copy(this.viewer.camera.up);
+    const quaternion = new Quaternion().setFromUnitVectors(upY, up);
+    const front = new Vector3().copy(frontY).applyQuaternion(quaternion).negate();
 
     this.directionalLight.position
-      .copy(this.viewer.camera.up)
+      .copy(up)
       .applyAxisAngle(front, (-Math.PI * 30) / 180)
       .multiplyScalar(extentsSize * 2)
       .add(extentsCenter);

package/src/Viewer/components/ResizeCanvasComponent.ts

@@ -43,23 +43,6 @@ export class ResizeCanvasComponent implements IComponent {
 
     if (!width || !height) return; // <- invisible viewer, or viewer with parent removed
 
-    const camera = this.viewer.camera as any;
-    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, height });
+    this.viewer.setSize(width, height);
   };
 }

package/src/Viewer/draggers/OrbitDragger.ts

@@ -81,6 +81,13 @@ export class OrbitDragger implements IDragger {
     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({
@@ -102,6 +109,8 @@ export class OrbitDragger implements IDragger {
         break;
     }
 
+    this.viewer.emitEvent({ type: "changecamera" });
+
     this.changed = true;
   };
 

package/src/Viewer/draggers/WalkDragger.ts

@@ -56,6 +56,7 @@ export class WalkDragger implements IDragger {
 
   controlsChange = () => {
     this.viewer.update();
+    this.viewer.emitEvent({ type: "changecamera" });
   };
 
   walkspeedChange = (event: any) => {

package/src/Viewer/helpers/WCSHelper.ts

@@ -28,9 +28,9 @@ export class WCSHelper extends Object3D {
     this.orthoCamera = new OrthographicCamera(-2, 2, 2, -2, 0, 4);
     this.orthoCamera.position.set(0, 0, 2);
 
-    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#aa0000" });
-    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00aa00" });
-    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000aa" });
+    const matRed = new MeshBasicMaterial({ toneMapped: false, color: "#dd0000" });
+    const matGreen = new MeshBasicMaterial({ toneMapped: false, color: "#00dd00" });
+    const matBlue = new MeshBasicMaterial({ toneMapped: false, color: "#0000dd" });
 
     const spriteRed = this.getSpriteMaterial(matRed.color, "X");
     const spriteGreen = this.getSpriteMaterial(matGreen.color, "Y");