@inweb/viewer-three 27.2.0 → 27.2.2

package/lib/Viewer/controls/WalkControls.d.ts

@@ -19,8 +19,14 @@ export declare class WalkControls extends Controls<WalkControlsEventMap> {
     movementSpeed: number;
     multiplier: number;
     private groundFollowingSkippedFrames;
+    readonly GROUND_BOX_HALF_SIZE = 20;
+    readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3;
     private raycaster;
     private groundObjects;
+    private _groundObjectBoxes;
+    private _activeGroundObjects;
+    private _groundBox;
+    private _groundBoxCenter;
     private moveKeys;
     private moveWheel;
     private moveClock;
@@ -41,6 +47,8 @@ export declare class WalkControls extends Controls<WalkControlsEventMap> {
     onWheel: (event: WheelEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void;
     onKeyUp: (event: KeyboardEvent) => void;
+    private _rebuildGroundBox;
+    private _needsGroundBoxRebuild;
     private updateGroundFollowing;
     update(): void;
     rotateCamera(delta: Vector2): void;

package/lib/Viewer/draggers/CuttingPlaneDragger.d.ts

@@ -1,18 +1,22 @@
 import { Object3D, Plane, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 import type { Viewer } from "../Viewer";
-import { PlaneHelper } from "../helpers/PlaneHelper";
+import { PlaneHelper2 } from "../helpers/PlaneHelper2";
 import { OrbitDragger } from "./OrbitDragger";
 export declare class CuttingPlaneDragger extends OrbitDragger {
     protected plane: Plane;
     protected planeCenter: Object3D;
-    protected planeHelper: PlaneHelper;
-    protected transform: TransformControls;
-    constructor(viewer: Viewer, normal: Vector3, color: number);
+    protected planeHelper: PlaneHelper2;
+    protected translate: TransformControls;
+    protected rotate: TransformControls;
+    constructor(viewer: Viewer, normal: Vector3);
     dispose(): void;
     transformChange: () => void;
-    transformDrag: (event: any) => void;
+    translateDrag: (event: any) => void;
+    rotateDrag: (event: any) => void;
     updatePlaneSize: () => void;
     updateTransformCamera: () => void;
+    onKeyDown: (event: KeyboardEvent) => void;
+    onKeyUp: (event: KeyboardEvent) => void;
     onDoubleClick: (event: PointerEvent) => void;
 }

package/lib/Viewer/helpers/PlaneHelper2.d.ts

@@ -0,0 +1,8 @@
+import { Line, Mesh } from "three";
+export declare class PlaneHelper2 extends Line {
+    size: number;
+    helper: Mesh;
+    constructor(size?: number, color?: number);
+    dispose(): void;
+    updateMatrixWorld(force: boolean): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.2.0",
+  "version": "27.2.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,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.2.0",
-    "@inweb/eventemitter2": "~27.2.0",
-    "@inweb/markup": "~27.2.0",
-    "@inweb/viewer-core": "~27.2.0"
+    "@inweb/client": "~27.2.2",
+    "@inweb/eventemitter2": "~27.2.2",
+    "@inweb/markup": "~27.2.2",
+    "@inweb/viewer-core": "~27.2.2"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/Viewer.ts

@@ -542,6 +542,8 @@ export class Viewer
     if (!this.renderer) return;
 
     this._markup.clearOverlay();
+
+    this.emitEvent({ type: "clearoverlay" });
     this.update();
   }
 
@@ -549,6 +551,8 @@ export class Viewer
     if (!this.renderer) return;
 
     this.renderer.clippingPlanes = [];
+
+    this.emitEvent({ type: "clearslices" });
     this.update();
   }
 

package/src/Viewer/components/CameraComponent.ts

@@ -134,7 +134,7 @@ export class CameraComponent implements IComponent {
     });
 
     if (camera) {
-      camera.isDefaultCamera = true;
+      camera.userData.isDefaultCamera = true;
       camera.scale.set(1, 1, 1); // <- Visualize fix
 
       this.switchCamera(camera);

package/src/Viewer/components/InfoComponent.ts

@@ -100,6 +100,7 @@ export class InfoComponent implements IComponent {
 
     this.viewer.info.memory.geometries = 0;
     this.viewer.info.memory.geometryBytes = 0;
+    this.viewer.info.memory.optimizedGeometryBytes = 0;
     this.viewer.info.memory.textures = 0;
     this.viewer.info.memory.textureBytes = 0;
     this.viewer.info.memory.materials = 0;
@@ -141,6 +142,7 @@ export class InfoComponent implements IComponent {
 
     this.viewer.info.memory.geometries += info.memory.geometries;
     this.viewer.info.memory.geometryBytes += info.memory.geometryBytes;
+    this.viewer.info.memory.optimizedGeometryBytes += info.memory.optimizedGeometryBytes;
     this.viewer.info.memory.textures += info.memory.textures;
     this.viewer.info.memory.textureBytes += info.memory.textureBytes;
     this.viewer.info.memory.materials += info.memory.materials;
@@ -153,7 +155,9 @@ export class InfoComponent implements IComponent {
 
     console.log("Number of objects:", info.scene.objects);
     console.log("Number of objects after optimization:", info.optimizedScene.objects);
-    console.log("Total geometry size:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
+    console.log("Geometry size:", info.memory.geometryBytes / (1024 * 1024), "MB");
+    console.log("Optimized geometry size:", info.memory.optimizedGeometryBytes / (1024 * 1024), "MB");
+    console.log("Estimated GPU used:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
 
     console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
   };

package/src/Viewer/controls/WalkControls.ts

@@ -21,7 +21,7 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Clock, Camera, Controls, Quaternion, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
+import { Box3, Clock, Camera, Controls, Quaternion, Vector2, Vector3, Raycaster, Object3D, MathUtils } from "three";
 
 interface WalkControlsEventMap {
   change: { type: "change" };
@@ -41,8 +41,15 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   public multiplier = 3;
   private groundFollowingSkippedFrames = 0;
 
+  readonly GROUND_BOX_HALF_SIZE = 20;
+  readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3; // fraction of half-size
+
   private raycaster: Raycaster;
   private groundObjects: Object3D[];
+  private _groundObjectBoxes = new Map<Object3D, Box3>();
+  private _activeGroundObjects: Object3D[] = [];
+  private _groundBox = new Box3();
+  private _groundBoxCenter = new Vector3();
 
   private moveKeys: Set<string>;
   private moveWheel = 0;
@@ -64,6 +71,9 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     this.camera = camera;
 
     this.groundObjects = groundObjects;
+    for (const obj of groundObjects) {
+      this._groundObjectBoxes.set(obj, new Box3().setFromObject(obj));
+    }
     this.raycaster = new Raycaster();
     this.raycaster.near = 0;
     this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
@@ -178,11 +188,39 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     if (this.moveKeys.delete(event.code)) this.update();
   };
 
+  private _rebuildGroundBox(center: Vector3) {
+    const h = this.GROUND_BOX_HALF_SIZE;
+    this._groundBoxCenter.copy(center);
+    this._groundBox.set(
+      new Vector3(center.x - h, center.y - h * 4, center.z - h),
+      new Vector3(center.x + h, center.y + h * 4, center.z + h)
+    );
+
+    this._activeGroundObjects = this.groundObjects.filter((obj) => {
+      const objectBox = this._groundObjectBoxes.get(obj);
+      return objectBox !== undefined && this._groundBox.intersectsBox(objectBox);
+    });
+  }
+
+  private _needsGroundBoxRebuild(pos: Vector3): boolean {
+    if (this._activeGroundObjects.length === 0 && this.groundObjects.length > 0) return true;
+    const threshold = this.GROUND_BOX_HALF_SIZE * this.GROUND_BOX_REFRESH_THRESHOLD;
+    return (
+      Math.abs(pos.x - this._groundBoxCenter.x) > threshold || Math.abs(pos.z - this._groundBoxCenter.z) > threshold
+    );
+  }
+
   private updateGroundFollowing() {
+    const pos = this.object.position;
+
+    if (this._needsGroundBoxRebuild(pos)) {
+      this._rebuildGroundBox(pos);
+    }
+
     this._up.copy(this.camera.up).negate();
-    this.raycaster.set(this.object.position, this._up);
+    this.raycaster.set(pos, this._up);
 
-    const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+    const intersects = this.raycaster.intersectObjects(this._activeGroundObjects, false);
     if (intersects.length > 0) {
       const groundY = intersects[0].point.y;
       const targetY = groundY + this.EYE_HEIGHT;

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -25,16 +25,17 @@ import { Object3D, Plane, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
 import type { Viewer } from "../Viewer";
-import { PlaneHelper } from "../helpers/PlaneHelper";
+import { PlaneHelper2 } from "../helpers/PlaneHelper2";
 import { OrbitDragger } from "./OrbitDragger";
 
 export class CuttingPlaneDragger extends OrbitDragger {
   protected plane: Plane;
   protected planeCenter: Object3D;
-  protected planeHelper: PlaneHelper;
-  protected transform: TransformControls;
+  protected planeHelper: PlaneHelper2;
+  protected translate: TransformControls;
+  protected rotate: TransformControls;
 
-  constructor(viewer: Viewer, normal: Vector3, color: number) {
+  constructor(viewer: Viewer, normal: Vector3) {
     super(viewer);
 
     const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
@@ -46,27 +47,43 @@ export class CuttingPlaneDragger extends OrbitDragger {
     if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
     viewer.renderer.clippingPlanes.push(this.plane);
 
-    this.planeHelper = new PlaneHelper(this.plane, extentsSize, color, extentsCenter);
-    this.viewer.helpers.add(this.planeHelper);
-
     this.planeCenter = new Object3D();
     this.planeCenter.position.copy(extentsCenter);
+    this.planeCenter.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), normal);
     this.viewer.helpers.add(this.planeCenter);
 
-    this.transform = new TransformControls(viewer.camera, viewer.canvas);
-    this.transform.showX = !!normal.x;
-    this.transform.showY = !!normal.y;
-    this.transform.showZ = !!normal.z;
-    this.transform.attach(this.planeCenter);
-    this.transform.addEventListener("change", this.transformChange);
-    this.transform.addEventListener("dragging-changed", this.transformDrag);
-    this.viewer.helpers.add(this.transform.getHelper());
+    this.planeHelper = new PlaneHelper2(extentsSize);
+    this.planeCenter.add(this.planeHelper);
+
+    this.translate = new TransformControls(viewer.camera, viewer.canvas);
+    this.translate.setSpace("local");
+    this.translate.showX = false;
+    this.translate.showY = false;
+    this.translate.showZ = true;
+    this.translate.attach(this.planeCenter);
+    this.translate.addEventListener("change", this.transformChange);
+    this.translate.addEventListener("dragging-changed", this.translateDrag);
+    this.viewer.helpers.add(this.translate.getHelper());
+
+    this.rotate = new TransformControls(viewer.camera, viewer.canvas);
+    this.rotate.setMode("rotate");
+    this.rotate.setSpace("local");
+    this.rotate.showX = true;
+    this.rotate.showY = true;
+    this.rotate.showZ = false;
+    this.rotate.attach(this.planeCenter);
+    this.rotate.addEventListener("change", this.transformChange);
+    this.rotate.addEventListener("dragging-changed", this.rotateDrag);
+    this.viewer.helpers.add(this.rotate.getHelper());
 
     this.viewer.addEventListener("explode", this.updatePlaneSize);
     this.viewer.addEventListener("show", this.updatePlaneSize);
     this.viewer.addEventListener("showall", this.updatePlaneSize);
     this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+    window.addEventListener("keydown", this.onKeyDown);
+    window.addEventListener("keyup", this.onKeyUp);
+
     this.viewer.update();
   }
 
@@ -76,12 +93,20 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.viewer.removeEventListener("showall", this.updatePlaneSize);
     this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
+    window.removeEventListener("keydown", this.onKeyDown);
+    window.removeEventListener("keyup", this.onKeyUp);
+
+    this.translate.removeEventListener("change", this.transformChange);
+    this.translate.removeEventListener("dragging-changed", this.translateDrag);
+    this.translate.getHelper().removeFromParent();
+    this.translate.detach();
+    this.translate.dispose();
 
-    this.transform.removeEventListener("change", this.transformChange);
-    this.transform.removeEventListener("dragging-changed", this.transformDrag);
-    this.transform.getHelper().removeFromParent();
-    this.transform.detach();
-    this.transform.dispose();
+    this.rotate.removeEventListener("change", this.transformChange);
+    this.rotate.removeEventListener("dragging-changed", this.rotateDrag);
+    this.rotate.getHelper().removeFromParent();
+    this.rotate.detach();
+    this.rotate.dispose();
 
     this.planeHelper.removeFromParent();
     this.planeHelper.dispose();
@@ -95,12 +120,19 @@ export class CuttingPlaneDragger extends OrbitDragger {
   }
 
   transformChange = () => {
+    this.plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.planeCenter.quaternion);
     this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
     this.viewer.update();
   };
 
-  transformDrag = (event) => {
+  translateDrag = (event) => {
+    this.orbit.enabled = !event.value;
+    this.rotate.enabled = !event.value;
+  };
+
+  rotateDrag = (event) => {
     this.orbit.enabled = !event.value;
+    this.translate.enabled = !event.value;
   };
 
   updatePlaneSize = () => {
@@ -109,13 +141,22 @@ export class CuttingPlaneDragger extends OrbitDragger {
   };
 
   updateTransformCamera = () => {
-    this.transform.camera = this.viewer.camera;
+    this.translate.camera = this.viewer.camera;
+    this.rotate.camera = this.viewer.camera;
+  };
+
+  onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Shift") this.rotate.setRotationSnap(Math.PI / 4);
+  };
+
+  onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === "Shift") this.rotate.setRotationSnap(null);
   };
 
   onDoubleClick = (event: PointerEvent) => {
     event.stopPropagation();
 
-    this.plane.negate();
-    this.viewer.update();
+    this.planeCenter.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
+    this.transformChange();
   };
 }

package/src/Viewer/draggers/CuttingPlaneXAxis.ts

@@ -28,6 +28,6 @@ import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(1, 0, 0), 0xff0000);
+    super(viewer, new Vector3(-1, 0, 0));
   }
 }

package/src/Viewer/draggers/CuttingPlaneYAxis.ts

@@ -28,6 +28,6 @@ import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, 1, 0), 0x00ff00);
+    super(viewer, new Vector3(0, -1, 0));
   }
 }

package/src/Viewer/draggers/CuttingPlaneZAxis.ts

@@ -28,6 +28,6 @@ import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, 0, 1), 0x0000ff);
+    super(viewer, new Vector3(0, 0, -1));
   }
 }

package/src/Viewer/helpers/{PlaneHelper.ts → PlaneHelper2.ts}

@@ -29,19 +29,13 @@ import {
   LineBasicMaterial,
   Mesh,
   MeshBasicMaterial,
-  Object3D,
-  Plane,
-  Vector3,
 } from "three";
 
-class PlaneHelper extends Line {
-  public plane: Plane;
+export class PlaneHelper2 extends Line {
   public size: number;
-  public offset: Vector3;
-  public helper: Object3D;
+  public helper: Mesh;
 
-  constructor(plane: Plane, size = 1, color = 0xffff00, offset: Vector3 = new Vector3()) {
-    // const positions = [1, -1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+  constructor(size = 1, color = 0xc0c0c0) {
     const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
 
     const geometry = new BufferGeometry();
@@ -50,11 +44,9 @@ class PlaneHelper extends Line {
 
     super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
 
-    (this as any).type = "PlaneHelper";
+    (this as any).type = "PlaneHelper2";
 
-    this.plane = plane;
     this.size = size;
-    this.offset = offset;
 
     const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
 
@@ -79,21 +71,12 @@ class PlaneHelper extends Line {
   dispose() {
     this.geometry.dispose();
     (this.material as any).dispose();
-    (this.children[0] as any).geometry.dispose();
-    (this.children[0] as any).material.dispose();
+    (this.helper as any).geometry.dispose();
+    (this.helper as any).material.dispose();
   }
 
   override updateMatrixWorld(force: boolean) {
-    this.position.set(0, 0, 0);
-    this.lookAt(this.plane.normal);
-
-    this.position.copy(this.offset);
-    this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
-
     this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
-
     super.updateMatrixWorld(force);
   }
 }
-
-export { PlaneHelper };