@inweb/viewer-three 27.2.2 → 27.2.3

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

@@ -1,22 +1,40 @@
-import { Object3D, Plane, Vector3 } from "three";
+import { Plane, Quaternion, Vector2, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 import type { Viewer } from "../Viewer";
 import { PlaneHelper2 } from "../helpers/PlaneHelper2";
+import { Snapper } from "../measurement/Snapper";
 import { OrbitDragger } from "./OrbitDragger";
 export declare class CuttingPlaneDragger extends OrbitDragger {
-    protected plane: Plane;
-    protected planeCenter: Object3D;
-    protected planeHelper: PlaneHelper2;
+    protected clippingPlanes: Plane[];
+    protected helpers: PlaneHelper2[];
+    protected activeHelper: PlaneHelper2;
+    protected snapper: Snapper;
+    protected downPosition: Vector2;
+    protected position0: Vector3;
+    protected quaternion0: Quaternion;
     protected translate: TransformControls;
     protected rotate: TransformControls;
-    constructor(viewer: Viewer, normal: Vector3);
+    constructor(viewer: Viewer);
     dispose(): void;
     transformChange: () => void;
     translateDrag: (event: any) => void;
     rotateDrag: (event: any) => void;
     updatePlaneSize: () => void;
     updateTransformCamera: () => void;
+    clearHelpers: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
     onKeyUp: (event: KeyboardEvent) => void;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    onPointerCancel: (event: PointerEvent) => void;
     onDoubleClick: (event: PointerEvent) => void;
+    private addHelper;
+    private setActiveHelper;
+    private saveState;
+    private reset;
+    addPlane(normal: Vector3): void;
+    addPlaneX(): void;
+    addPlaneY(): void;
+    addPlaneZ(): void;
+    deleteActivePlane(): void;
 }

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

@@ -1,8 +1,12 @@
-import { Line, Mesh } from "three";
-export declare class PlaneHelper2 extends Line {
+import { Line, LineBasicMaterial, Mesh, MeshBasicMaterial, Object3D, Plane } from "three";
+export declare class PlaneHelper2 extends Object3D {
+    plane: Plane;
     size: number;
-    helper: Mesh;
-    constructor(size?: number, color?: number);
+    outline: Line;
+    mesh: Mesh;
+    constructor(size?: number, color?: number, opacity?: number);
     dispose(): void;
     updateMatrixWorld(force: boolean): void;
+    getLineMaterial(): LineBasicMaterial;
+    getMeshMaterial(): MeshBasicMaterial;
 }

package/lib/Viewer/measurement/Snapper.d.ts

@@ -10,7 +10,7 @@ export declare class Snapper {
     constructor(camera: Camera, renderer: WebGLRenderer, canvas: HTMLCanvasElement);
     isMobile(): boolean;
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
-    getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>>;
+    getPointerIntersects(mouse: Vector2, objects: Object3D[], recursive?: boolean, clip?: boolean): Array<Intersection<Object3D>>;
     getDetectRadius(point: Vector3): number;
     getSnapPoint(mouse: Vector2, objects: Object3D[]): Vector3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.2.2",
+  "version": "27.2.3",
   "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.2",
-    "@inweb/eventemitter2": "~27.2.2",
-    "@inweb/markup": "~27.2.2",
-    "@inweb/viewer-core": "~27.2.2"
+    "@inweb/client": "~27.2.3",
+    "@inweb/eventemitter2": "~27.2.3",
+    "@inweb/markup": "~27.2.3",
+    "@inweb/viewer-core": "~27.2.3"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/components/SelectionComponent.ts

@@ -58,7 +58,7 @@ export class SelectionComponent implements IComponent {
   };
 
   onPointerUp = (event: PointerEvent) => {
-    if (!event.isPrimary) return;
+    if (!event.isPrimary || event.button !== 0) return;
 
     const upPosition = this.getMousePosition(event, new Vector2());
     if (upPosition.distanceTo(this.downPosition) !== 0) return;

package/src/Viewer/controls/WalkControls.ts

@@ -42,7 +42,7 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   private groundFollowingSkippedFrames = 0;
 
   readonly GROUND_BOX_HALF_SIZE = 20;
-  readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3; // fraction of half-size
+  readonly GROUND_BOX_REFRESH_THRESHOLD = 0.3;
 
   private raycaster: Raycaster;
   private groundObjects: Object3D[];
@@ -74,6 +74,9 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     for (const obj of groundObjects) {
       this._groundObjectBoxes.set(obj, new Box3().setFromObject(obj));
     }
+    const pos = this.object.position;
+    this._rebuildGroundBox(pos);
+
     this.raycaster = new Raycaster();
     this.raycaster.near = 0;
     this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
@@ -185,7 +188,12 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   };
 
   onKeyUp = (event: KeyboardEvent) => {
-    if (this.moveKeys.delete(event.code)) this.update();
+    if (this.moveKeys.delete(event.code)) {
+      if (this.moveKeys.size === 0) {
+        this._rebuildGroundBox(this.object.position);
+      }
+      this.update();
+    }
   };
 
   private _rebuildGroundBox(center: Vector3) {

package/src/Viewer/draggers/CuttingPlaneDragger.ts

@@ -21,46 +21,49 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Plane, Vector3 } from "three";
+import { Plane, Quaternion, Vector2, Vector3 } from "three";
 import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
 
 import type { Viewer } from "../Viewer";
+import { STATE } from "../controls/OrbitControls.js";
 import { PlaneHelper2 } from "../helpers/PlaneHelper2";
+import { Snapper } from "../measurement/Snapper";
 import { OrbitDragger } from "./OrbitDragger";
 
 export class CuttingPlaneDragger extends OrbitDragger {
-  protected plane: Plane;
-  protected planeCenter: Object3D;
-  protected planeHelper: PlaneHelper2;
+  protected clippingPlanes: Plane[];
+  protected helpers: PlaneHelper2[] = [];
+  protected activeHelper: PlaneHelper2 = null;
+  protected snapper: Snapper;
+  protected downPosition: Vector2;
+  protected position0: Vector3;
+  protected quaternion0: Quaternion;
   protected translate: TransformControls;
   protected rotate: TransformControls;
 
-  constructor(viewer: Viewer, normal: Vector3) {
+  constructor(viewer: Viewer) {
     super(viewer);
 
-    const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
-    const extentsCenter = viewer.extents.getCenter(new Vector3());
-    const constant = -extentsCenter.dot(normal);
+    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
 
-    this.plane = new Plane(normal, constant);
+    this.clippingPlanes = viewer.renderer.clippingPlanes;
+    this.clippingPlanes.forEach((plane) => this.addHelper(plane));
 
-    if (!viewer.renderer.clippingPlanes) viewer.renderer.clippingPlanes = [];
-    viewer.renderer.clippingPlanes.push(this.plane);
+    const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
 
-    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.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+    this.snapper.threshold = extentsSize / 10000;
 
-    this.planeHelper = new PlaneHelper2(extentsSize);
-    this.planeCenter.add(this.planeHelper);
+    this.downPosition = new Vector2();
+    this.position0 = new Vector3();
+    this.quaternion0 = new Quaternion();
 
     this.translate = new TransformControls(viewer.camera, viewer.canvas);
+    this.translate.setMode("translate");
     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());
@@ -71,15 +74,20 @@ export class CuttingPlaneDragger extends OrbitDragger {
     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.setActiveHelper(this.helpers[this.helpers.length - 1]);
+
     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.addEventListener("clearslices", this.clearHelpers);
+    this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown, true);
+    this.viewer.canvas.addEventListener("pointerup", this.onPointerUp, true);
+    this.viewer.canvas.addEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
     window.addEventListener("keydown", this.onKeyDown);
     window.addEventListener("keyup", this.onKeyUp);
@@ -92,6 +100,10 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.viewer.removeEventListener("show", this.updatePlaneSize);
     this.viewer.removeEventListener("showall", this.updatePlaneSize);
     this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
+    this.viewer.removeEventListener("clearslices", this.clearHelpers);
+    this.viewer.canvas.removeEventListener("pointerdown", this.onPointerDown, true);
+    this.viewer.canvas.removeEventListener("pointerup", this.onPointerUp, true);
+    this.viewer.canvas.removeEventListener("pointercancel", this.onPointerCancel, true);
     this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
     window.removeEventListener("keydown", this.onKeyDown);
     window.removeEventListener("keyup", this.onKeyUp);
@@ -108,21 +120,26 @@ export class CuttingPlaneDragger extends OrbitDragger {
     this.rotate.detach();
     this.rotate.dispose();
 
-    this.planeHelper.removeFromParent();
-    this.planeHelper.dispose();
-
-    this.planeCenter.removeFromParent();
-
-    // this.viewer.renderer.clippingPlanes = this.viewer.renderer.clippingPlanes.filter((plane) => plane !== this.plane);
-    // this.viewer.update();
+    this.helpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.helpers = [];
+    this.activeHelper = null;
 
     super.dispose();
   }
 
   transformChange = () => {
-    this.plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.planeCenter.quaternion);
-    this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
+    if (!this.activeHelper) return;
+
+    const plane = this.activeHelper.plane;
+    plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.activeHelper.quaternion);
+    plane.constant = -this.activeHelper.position.dot(plane.normal);
+
     this.viewer.update();
+
+    this.changed = true; // <- cancel context menu
   };
 
   translateDrag = (event) => {
@@ -136,27 +153,170 @@ export class CuttingPlaneDragger extends OrbitDragger {
   };
 
   updatePlaneSize = () => {
-    this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    this.helpers.forEach((planeHelper) => (planeHelper.size = extentsSize));
     this.viewer.update();
   };
 
   updateTransformCamera = () => {
     this.translate.camera = this.viewer.camera;
     this.rotate.camera = this.viewer.camera;
+    this.snapper.camera = this.viewer.camera;
+  };
+
+  clearHelpers = () => {
+    this.setActiveHelper();
+
+    this.helpers.forEach((helper) => {
+      helper.removeFromParent();
+      helper.dispose();
+    });
+    this.helpers = [];
+
+    this.viewer.update();
   };
 
   onKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Shift") this.rotate.setRotationSnap(Math.PI / 4);
+    if (event.key === "Delete" || event.key === "Backspace") this.deleteActivePlane();
+    if (event.key === "Escape" && (this.translate.dragging || this.rotate.dragging)) this.reset();
   };
 
   onKeyUp = (event: KeyboardEvent) => {
     if (event.key === "Shift") this.rotate.setRotationSnap(null);
   };
 
+  onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || !event.isPrimary) return;
+
+    this.snapper.getMousePosition(event, this.downPosition);
+    this.saveState();
+  };
+
+  onPointerUp = (event: PointerEvent) => {
+    if (event.button !== 0) return;
+
+    const upPosition = this.snapper.getMousePosition(event, new Vector2());
+    if (upPosition.distanceTo(this.downPosition) !== 0) return;
+
+    const intersects = this.snapper.getPointerIntersects(upPosition, this.helpers, true, false);
+    if (intersects.length === 0) return;
+
+    this.setActiveHelper(intersects[0].object.parent as PlaneHelper2);
+  };
+
+  onPointerCancel = (event: PointerEvent) => {
+    this.viewer.canvas.dispatchEvent(new PointerEvent("pointerup", event));
+  };
+
   onDoubleClick = (event: PointerEvent) => {
-    event.stopPropagation();
+    if (!this.activeHelper) return;
 
-    this.planeCenter.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
+    const mousePosition = this.snapper.getMousePosition(event, new Vector2());
+
+    const intersects = this.snapper.getPointerIntersects(mousePosition, [this.activeHelper], true, false);
+    if (intersects.length === 0) return;
+
+    this.activeHelper.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
     this.transformChange();
+
+    event.stopPropagation();
   };
+
+  private addHelper(plane: Plane): PlaneHelper2 {
+    const extentsSize = this.viewer.extents.getSize(new Vector3()).length() || 1;
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+
+    const helper = new PlaneHelper2(extentsSize);
+    helper.plane = plane;
+    helper.position.copy(plane.projectPoint(extentsCenter, new Vector3()));
+    helper.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), plane.normal);
+
+    this.helpers.push(helper);
+    this.viewer.helpers.add(helper);
+
+    return helper;
+  }
+
+  private setActiveHelper(helper?: PlaneHelper2) {
+    if (helper === this.activeHelper) return;
+
+    if (this.activeHelper) {
+      this.activeHelper.getLineMaterial().color.setHex(0xf0f0f0);
+      this.activeHelper.getMeshMaterial().opacity = 0.15;
+
+      this.translate.detach();
+      this.rotate.detach();
+    }
+
+    this.activeHelper = helper;
+
+    if (this.activeHelper) {
+      this.activeHelper.getLineMaterial().color.setHex(0xd0d0d0);
+      this.activeHelper.getMeshMaterial().opacity = 0.3;
+
+      this.translate.attach(this.activeHelper);
+      this.rotate.attach(this.activeHelper);
+    }
+
+    this.viewer.update();
+  }
+
+  private saveState() {
+    if (!this.activeHelper) return;
+
+    this.position0.copy(this.activeHelper.position);
+    this.quaternion0.copy(this.activeHelper.quaternion);
+  }
+
+  private reset() {
+    if (!this.activeHelper) return;
+
+    this.translate.dragging = false;
+    this.rotate.dragging = false;
+    this.orbit.state = STATE.NONE;
+
+    this.activeHelper.position.copy(this.position0);
+    this.activeHelper.quaternion.copy(this.quaternion0);
+
+    this.transformChange();
+  }
+
+  addPlane(normal: Vector3) {
+    const extentsCenter = this.viewer.extents.getCenter(new Vector3());
+    const constant = -extentsCenter.dot(normal);
+
+    const plane = new Plane(normal, constant);
+    this.clippingPlanes.push(plane);
+
+    const helper = this.addHelper(plane);
+    this.setActiveHelper(helper);
+  }
+
+  addPlaneX() {
+    this.addPlane(new Vector3(-1, 0, 0));
+  }
+
+  addPlaneY() {
+    this.addPlane(new Vector3(0, -1, 0));
+  }
+
+  addPlaneZ() {
+    this.addPlane(new Vector3(0, 0, -1));
+  }
+
+  deleteActivePlane() {
+    if (!this.activeHelper) return;
+
+    const helper = this.activeHelper;
+
+    const index = this.clippingPlanes.indexOf(helper.plane);
+    if (index !== -1) this.clippingPlanes.splice(index, 1);
+
+    this.helpers = this.helpers.filter((x) => x !== helper);
+    helper.removeFromParent();
+    helper.dispose();
+
+    this.setActiveHelper(this.helpers[this.helpers.length - 1]);
+  }
 }

package/src/Viewer/draggers/CuttingPlaneXAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(-1, 0, 0));
+    super(viewer);
+    this.addPlaneX();
   }
 }

package/src/Viewer/draggers/CuttingPlaneYAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, -1, 0));
+    super(viewer);
+    this.addPlaneY();
   }
 }

package/src/Viewer/draggers/CuttingPlaneZAxis.ts

@@ -21,13 +21,12 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Vector3 } from "three";
-
 import type { Viewer } from "../Viewer";
 import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 
 export class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
   constructor(viewer: Viewer) {
-    super(viewer, new Vector3(0, 0, -1));
+    super(viewer);
+    this.addPlaneZ();
   }
 }

package/src/Viewer/draggers/index.ts

@@ -23,6 +23,7 @@
 
 import { IDraggersRegistry, draggersRegistry } from "@inweb/viewer-core";
 
+import { CuttingPlaneDragger } from "./CuttingPlaneDragger";
 import { CuttingPlaneXAxisDragger } from "./CuttingPlaneXAxis";
 import { CuttingPlaneYAxisDragger } from "./CuttingPlaneYAxis";
 import { CuttingPlaneZAxisDragger } from "./CuttingPlaneZAxis";
@@ -84,6 +85,7 @@ draggers.registerDragger("Pan", (viewer) => new PanDragger(viewer));
 draggers.registerDragger("Orbit", (viewer) => new OrbitDragger(viewer));
 draggers.registerDragger("Zoom", (viewer) => new ZoomDragger(viewer));
 draggers.registerDragger("MeasureLine", (viewer) => new MeasureLineDragger(viewer));
+draggers.registerDragger("CuttingPlane", (viewer) => new CuttingPlaneDragger(viewer));
 draggers.registerDragger("CuttingPlaneXAxis", (viewer) => new CuttingPlaneXAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneYAxis", (viewer) => new CuttingPlaneYAxisDragger(viewer));
 draggers.registerDragger("CuttingPlaneZAxis", (viewer) => new CuttingPlaneZAxisDragger(viewer));

package/src/Viewer/helpers/PlaneHelper2.ts

@@ -29,54 +29,67 @@ import {
   LineBasicMaterial,
   Mesh,
   MeshBasicMaterial,
+  Object3D,
+  Plane,
 } from "three";
 
-export class PlaneHelper2 extends Line {
+export class PlaneHelper2 extends Object3D {
+  public plane: Plane;
   public size: number;
-  public helper: Mesh;
+  public outline: Line;
+  public mesh: Mesh;
 
-  constructor(size = 1, color = 0xc0c0c0) {
-    const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
+  constructor(size = 1, color = 0xf0f0f0, opacity = 0.15) {
+    super();
+
+    (this as any).type = "PlaneHelper2";
+    this.size = size;
 
+    const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
     const geometry = new BufferGeometry();
     geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
     geometry.computeBoundingSphere();
 
-    super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
-
-    (this as any).type = "PlaneHelper2";
-
-    this.size = size;
+    this.outline = new Line(geometry, new LineBasicMaterial({ color, toneMapped: false }));
 
     const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
-
     const geometry2 = new BufferGeometry();
     geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
     geometry2.computeBoundingSphere();
 
-    this.helper = new Mesh(
+    this.mesh = new Mesh(
       geometry2,
       new MeshBasicMaterial({
         color,
-        opacity: 0.2,
+        opacity,
         transparent: true,
         depthWrite: false,
         toneMapped: false,
         side: DoubleSide,
       })
     );
-    this.add(this.helper);
+
+    this.add(this.outline);
+    this.add(this.mesh);
   }
 
   dispose() {
-    this.geometry.dispose();
-    (this.material as any).dispose();
-    (this.helper as any).geometry.dispose();
-    (this.helper as any).material.dispose();
+    this.outline.geometry.dispose();
+    (this.outline.material as LineBasicMaterial).dispose();
+    this.mesh.geometry.dispose();
+    (this.mesh.material as MeshBasicMaterial).dispose();
   }
 
   override updateMatrixWorld(force: boolean) {
     this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
     super.updateMatrixWorld(force);
   }
+
+  getLineMaterial(): LineBasicMaterial {
+    return this.outline.material as LineBasicMaterial;
+  }
+
+  getMeshMaterial(): MeshBasicMaterial {
+    return this.mesh.material as MeshBasicMaterial;
+  }
 }