@inweb/viewer-three 27.4.6 → 27.5.0

package/extensions/components/AxesHelperComponent.ts

@@ -76,12 +76,14 @@ class AxesHelperComponent implements IComponent {
     this.axesHelper1.position.set(0, 0, 0);
     this.axesHelper1.scale.setScalar(extentsSize * 1.5);
     this.viewer.helpers.add(this.axesHelper1);
+    this.viewer.update();
 
     if (this.viewer.models.length < 1) return;
 
     this.axesHelper2.position.copy(extentsCenter);
     this.axesHelper2.scale.setScalar(extentsSize);
     this.viewer.helpers.add(this.axesHelper2);
+    this.viewer.update();
 
     if (this.viewer.models.length < 2) return;
 
@@ -95,6 +97,7 @@ class AxesHelperComponent implements IComponent {
 
       this.modelHelpers.push(helper);
       this.viewer.helpers.add(helper);
+      this.viewer.update();
     });
   };
 }

package/extensions/components/ExtentsHelperComponent.ts

@@ -74,17 +74,20 @@ class ExtentsHelperComponent implements IComponent {
 
     this.boxHelper.box = this.viewer.extents.clone();
     this.viewer.helpers.add(this.boxHelper);
+    this.viewer.update();
 
     if (this.viewer.models.length < 2) return;
 
-    this.viewer.models.forEach((model) => {
+    for (const model of this.viewer.models) {
       const extents = model.getExtents(new Box3());
+      if (extents.isEmpty()) continue;
 
       const helper = new Box3Helper(extents, "#ff0000");
 
       this.modelHelpers.push(helper);
       this.viewer.helpers.add(helper);
-    });
+    }
+    this.viewer.update();
   };
 }
 

package/extensions/components/GridHelperComponent.ts

@@ -59,6 +59,7 @@ class GridHelperComponent implements IComponent {
     this.gridHelper.quaternion.setFromUnitVectors(upY, up);
 
     this.viewer.helpers.add(this.gridHelper);
+    this.viewer.update();
   };
 }
 

package/extensions/components/LightHelperComponent.ts

@@ -66,6 +66,7 @@ class LightHelperComponent implements IComponent {
       if (helper) {
         this.lightHelpers.push(helper);
         this.viewer.helpers.add(helper);
+        this.viewer.update();
       }
     });
   };

package/lib/Viewer/Viewer.d.ts

@@ -1,16 +1,15 @@
-import { Box3, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
+import { Box3, Group, Object3D, OrthographicCamera, PerspectiveCamera, Plane, Scene, Vector3, WebGLRenderer } from "three";
 import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
 import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
 import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
-import { SSAARenderPass } from "./postprocessing/SSAARenderPass.js";
+import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass.js";
 import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 import { EventEmitter2 } from "@inweb/eventemitter2";
 import { Assembly, Client, Model, File } from "@inweb/client";
 import { CanvasEventMap, FileSource, IComponent, IDragger, IInfo, ILoader, IOptions, IViewer, IViewpoint, OptionsEventMap, ViewerEventMap } from "@inweb/viewer-core";
 import { IMarkup, IWorldTransform } from "@inweb/markup";
 import { IModelImpl } from "./models/IModelImpl";
-import { Helpers } from "./scenes/Helpers";
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
  */
@@ -24,11 +23,10 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     info: IInfo;
     private canvaseventlistener;
     scene: Scene | undefined;
-    helpers: Helpers | undefined;
+    helpers: Group | undefined;
     camera: PerspectiveCamera | OrthographicCamera | undefined;
     renderer: WebGLRenderer | undefined;
     renderPass: RenderPass | undefined;
-    helpersPass: RenderPass | undefined;
     fxaaPass: FXAAPass | undefined;
     smaaPass: SMAAPass | undefined;
     ssaaRenderPass: SSAARenderPass | undefined;
@@ -37,9 +35,9 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     selected: Object3D[];
     extents: Box3;
     target: Vector3;
+    clippingPlanes: Plane[];
     private _activeDragger;
     private _components;
-    private _updateDelay;
     private _renderNeeded;
     private _renderTime;
     private _markup;
@@ -61,7 +59,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
     dispose(): this;
     isInitialized(): boolean;
     setSize(width: number, height: number, updateStyle?: boolean): void;
-    update(force?: boolean): void;
+    update(force?: boolean | number): void;
     render(time?: DOMHighResTimeStamp, force?: boolean): void;
     loadReferences(model: Model | File | Assembly): Promise<this>;
     /**

package/lib/Viewer/components/CameraComponent.d.ts

@@ -7,6 +7,6 @@ export declare class CameraComponent implements IComponent {
     getCameraMode(camera: any): CameraMode;
     switchCamera(camera: any): void;
     switchCameraMode(mode: CameraMode): void;
-    optionsChange: () => void;
+    syncOptions: () => void;
     geometryEnd: () => void;
 }

package/lib/Viewer/components/ClippingPlaneComponent.d.ts

@@ -0,0 +1,8 @@
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class ClippingPlaneComponent implements IComponent {
+    protected viewer: Viewer;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    applyClippingPlanes: () => void;
+}

package/lib/Viewer/components/HighlighterComponent.d.ts

@@ -14,7 +14,7 @@ export declare class HighlighterComponent implements IComponent {
     highlight(objects: Object3D | Object3D[]): void;
     unhighlight(objects: Object3D | Object3D[]): void;
     geometryEnd: () => void;
-    optionsChange: () => void;
+    syncOptions: () => void;
     syncHighlightColors(): void;
-    viewerResize(event: ResizeEvent): void;
+    viewerResize: (event: ResizeEvent) => void;
 }

package/lib/Viewer/components/InfoComponent.d.ts

@@ -10,7 +10,7 @@ export declare class InfoComponent implements IComponent {
     dispose(): void;
     initialize: () => void;
     clear: () => void;
-    optionsChange: ({ data: options }: {
+    syncOptions: ({ data: options }: {
         data: any;
     }) => void;
     geometryStart: () => void;

package/lib/Viewer/components/SectionsComponent.d.ts

@@ -0,0 +1,15 @@
+import { IComponent, ResizeEvent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+export declare class SectionsComponent implements IComponent {
+    private viewer;
+    private sectionsHelper;
+    private updateTimerId;
+    private updateDelay;
+    constructor(viewer: Viewer);
+    dispose(): void;
+    syncOptions: () => void;
+    syncHelper: () => void;
+    syncSections: () => void;
+    viewerResize: (event: ResizeEvent) => void;
+    updateSections: () => void;
+}

package/lib/Viewer/components/WCSHelperComponent.d.ts

@@ -1,11 +1,11 @@
 import { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 export declare class WCSHelperComponent implements IComponent {
-    private wcsHelper;
     private viewer;
+    private wcsHelper;
     constructor(viewer: Viewer);
     dispose(): void;
-    geometryEnd: () => void;
+    syncHelper: () => void;
     viewerRender: () => void;
     updateHelperCamera: () => void;
 }

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

@@ -1,13 +1,12 @@
-import { Plane, Quaternion, Vector2, Vector3 } from "three";
+import { 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 clippingPlanes: Plane[];
     protected helpers: PlaneHelper2[];
-    protected activeHelper: PlaneHelper2;
+    protected activeHelper: PlaneHelper2 | undefined;
     protected snapper: Snapper;
     protected downPosition: Vector2;
     protected position0: Vector3;
@@ -16,18 +15,19 @@ export declare class CuttingPlaneDragger extends OrbitDragger {
     protected rotate: TransformControls;
     constructor(viewer: Viewer);
     dispose(): void;
+    transformUpdate: () => void;
     transformChange: () => void;
     translateDrag: (event: any) => void;
     rotateDrag: (event: any) => void;
-    updatePlaneSize: () => void;
-    updateTransformCamera: () => void;
+    syncHelpers: () => void;
     clearHelpers: () => void;
+    updateTransformCamera: () => 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;
+    onDoubleClick: (event: MouseEvent) => void;
     private addHelper;
     private setActiveHelper;
     private saveState;

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

@@ -9,7 +9,7 @@ export declare class OrbitDragger implements IDragger {
     dispose(): void;
     updateControls: () => void;
     updateControlsCamera: () => void;
-    optionsChange: ({ data: options }: {
+    updateZoomSpeed: ({ data: options }: {
         data: any;
     }) => void;
     controlsStart: () => void;

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

@@ -1,13 +1,13 @@
-import { Camera, Intersection, Object3D, Vector2, Vector3, WebGLRenderer } from "three";
+import { Camera, Intersection, Object3D, Plane, Vector2, Vector3 } from "three";
 export declare class Snapper {
     camera: Camera;
-    renderer: WebGLRenderer;
+    clippingPlanes: Plane[];
     canvas: HTMLCanvasElement;
     threshold: number;
     private raycaster;
     private detectRadiusInPixels;
     private edgesCache;
-    constructor(camera: Camera, renderer: WebGLRenderer, canvas: HTMLCanvasElement);
+    constructor(camera: Camera, clippingPlanes: Plane[], canvas: HTMLCanvasElement);
     isMobile(): boolean;
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
     getPointerIntersects(mouse: Vector2, objects: Object3D[], recursive?: boolean, clip?: boolean): Array<Intersection<Object3D>>;

package/package.json

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

package/src/Viewer/Viewer.ts

@@ -23,6 +23,7 @@
 
 import {
   Box3,
+  Group,
   LinearSRGBColorSpace,
   // LinearToneMapping,
   Object3D,
@@ -34,12 +35,13 @@ import {
   Vector2,
   Vector3,
   WebGLRenderer,
+  WebGLRenderTarget,
 } from "three";
 import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
 import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
 import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
-import { SSAARenderPass } from "./postprocessing/SSAARenderPass.js";
+import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass.js";
 import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
 
 import { EventEmitter2 } from "@inweb/eventemitter2";
@@ -72,7 +74,6 @@ import { commands } from "./commands";
 import { components } from "./components";
 import { loaders } from "./loaders";
 import { IModelImpl } from "./models/IModelImpl";
-import { Helpers } from "./scenes/Helpers";
 
 /**
  * 3D viewer powered by {@link https://threejs.org/ | Three.js}.
@@ -92,11 +93,10 @@ export class Viewer
   private canvaseventlistener: (event: any) => void;
 
   public scene: Scene | undefined;
-  public helpers: Helpers | undefined;
+  public helpers: Group | undefined;
   public camera: PerspectiveCamera | OrthographicCamera | undefined;
   public renderer: WebGLRenderer | undefined;
   public renderPass: RenderPass | undefined;
-  public helpersPass: RenderPass | undefined;
   public fxaaPass: FXAAPass | undefined;
   public smaaPass: SMAAPass | undefined;
   public ssaaRenderPass: SSAARenderPass | undefined;
@@ -105,11 +105,11 @@ export class Viewer
   public selected: Object3D[];
   public extents: Box3;
   public target: Vector3;
+  public clippingPlanes: Plane[];
 
   private _activeDragger: IDragger | null;
   private _components: IComponent[];
 
-  private _updateDelay: number;
   private _renderNeeded: boolean;
   private _renderTime: DOMHighResTimeStamp;
 
@@ -134,11 +134,11 @@ export class Viewer
     this.selected = [];
     this.extents = new Box3();
     this.target = new Vector3(0, 0, 0);
+    this.clippingPlanes = [];
 
     this._activeDragger = null;
     this._components = [];
 
-    this._updateDelay = 1000;
     this._renderNeeded = false;
     this._renderTime = 0;
 
@@ -171,7 +171,10 @@ export class Viewer
     this.addEventListener("optionschange", (event) => this.syncOptions(event.data));
 
     this.scene = new Scene();
-    this.helpers = new Helpers();
+
+    this.helpers = new Group();
+    this.helpers.name = "Helpers";
+    this.scene.add(this.helpers);
 
     const pixelRatio = window.devicePixelRatio;
     const rect = canvas.parentElement.getBoundingClientRect();
@@ -191,25 +194,26 @@ export class Viewer
       alpha: true,
       preserveDrawingBuffer: true,
       powerPreference: "high-performance",
-      logarithmicDepthBuffer: true,
+      logarithmicDepthBuffer: true, // <- required for sections filling
     });
     this.renderer.setPixelRatio(pixelRatio);
     this.renderer.setSize(width, height);
     this.renderer.outputColorSpace = LinearSRGBColorSpace;
     // this.renderer.toneMapping = LinearToneMapping;
+    this.renderer.localClippingEnabled = true;
 
     this.renderPass = new RenderPass(this.scene, this.camera);
-    this.helpersPass = new RenderPass(this.helpers, this.camera);
-    this.helpersPass.clear = false;
     this.fxaaPass = new FXAAPass();
     this.smaaPass = new SMAAPass();
-    this.ssaaRenderPass = new SSAARenderPass([this.scene, this.helpers], this.camera);
+    this.ssaaRenderPass = new SSAARenderPass(this.scene, this.camera);
     this.ssaaRenderPass.unbiased = true;
     this.outputPass = new OutputPass();
 
-    this.composer = new EffectComposer(this.renderer);
+    const renderTarget = new WebGLRenderTarget(1, 1, { samples: 4 });
+    renderTarget.texture.name = "EffectComposer.rt1";
+
+    this.composer = new EffectComposer(this.renderer, renderTarget);
     this.composer.addPass(this.renderPass);
-    this.composer.addPass(this.helpersPass);
     this.composer.addPass(this.smaaPass);
     this.composer.addPass(this.fxaaPass);
     this.composer.addPass(this.ssaaRenderPass);
@@ -252,9 +256,12 @@ export class Viewer
     this.setActiveDragger();
 
     this._components.forEach((component: IComponent) => component.dispose());
-    this._components = [];
+    this._components.length = 0;
 
-    this._markup.dispose();
+    if (this._markup) {
+      this._markup.dispose();
+      this._markup = undefined;
+    }
 
     if (this.canvas) {
       this.canvasEvents.forEach((x) => this.canvas.removeEventListener(x, this.canvaseventlistener));
@@ -263,7 +270,6 @@ export class Viewer
 
     if (this.composer) this.composer.dispose();
     if (this.renderPass) this.renderPass.dispose();
-    if (this.helpersPass) this.helpersPass.dispose();
     if (this.fxaaPass) this.fxaaPass.dispose();
     if (this.smaaPass) this.smaaPass.dispose();
     if (this.ssaaRenderPass) this.ssaaRenderPass.dispose();
@@ -275,7 +281,6 @@ export class Viewer
     this.camera = undefined;
     this.renderer = undefined;
     this.renderPass = undefined;
-    this.helpersPass = undefined;
     this.fxaaPass = undefined;
     this.smaaPass = undefined;
     this.ssaaRenderPass = undefined;
@@ -312,14 +317,14 @@ export class Viewer
     this.update(true);
   }
 
-  update(force = false): void {
+  update(force: boolean | number = false): void {
     const time = performance.now();
-    force = force || time - this._renderTime >= this._updateDelay;
+    if (typeof force === "number" && time - this._renderTime >= force) force = true;
 
     this._renderNeeded = true;
     if (force) this.render(time);
 
-    this.emitEvent({ type: "update", force });
+    this.emitEvent({ type: "update", force: !!force });
   }
 
   // Internal render routines
@@ -337,12 +342,7 @@ export class Viewer
     this.renderer.info.autoReset = false;
     this.renderer.info.reset();
 
-    if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
-      this.renderer.render(this.scene, this.camera);
-      this.renderer.render(this.helpers, this.camera);
-    } else {
-      this.composer.render(deltaTime);
-    }
+    this.composer.render(deltaTime);
 
     this.emitEvent({ type: "render", time, deltaTime });
   }
@@ -495,14 +495,16 @@ export class Viewer
     this.clearSelected();
 
     this.loaders.forEach((loader) => loader.dispose());
-    this.loaders = [];
+    this.loaders.length = 0;
 
     this.models.forEach((model) => model.dispose());
-    this.models = [];
+    this.models.length = 0;
 
-    this.scene.clear();
     this.helpers.clear();
 
+    this.scene.clear();
+    this.scene.add(this.helpers);
+
     this.extents.makeEmpty();
 
     this.syncOptions();
@@ -524,9 +526,19 @@ export class Viewer
     this.fxaaPass.enabled = options.antialiasing === "fxaa";
     this.smaaPass.enabled = options.antialiasing === "smaa";
     this.ssaaRenderPass.enabled = options.antialiasing === "ssaa";
+    this.renderPass.enabled = options.antialiasing !== "ssaa";
+
+    const samples = options.antialiasing === true || options.antialiasing === "msaa" ? 4 : 0;
+
+    if (this.composer.renderTarget1.samples !== samples) {
+      const size = this.renderer.getSize(new Vector2());
+
+      const newRenderTarget = new WebGLRenderTarget(1, 1, { samples });
+      newRenderTarget.texture.name = "EffectComposer.rt1";
 
-    this.renderPass.enabled = !this.ssaaRenderPass.enabled;
-    this.helpersPass.enabled = !this.ssaaRenderPass.enabled;
+      this.composer.reset(newRenderTarget);
+      this.composer.setSize(size.x, size.y);
+    }
 
     this.update();
   }
@@ -550,8 +562,9 @@ export class Viewer
   clearSlices(): void {
     if (!this.renderer) return;
 
-    this.renderer.clippingPlanes = [];
+    this.clippingPlanes.length = 0;
 
+    this.emitEvent({ type: "changecuttingplanes" });
     this.emitEvent({ type: "clearslices" });
     this.update();
   }
@@ -666,7 +679,6 @@ export class Viewer
 
         this.camera = camera;
         this.renderPass.camera = camera;
-        this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
 
         this.options.cameraMode = "orthographic";
@@ -694,7 +706,6 @@ export class Viewer
 
         this.camera = camera;
         this.renderPass.camera = camera;
-        this.helpersPass.camera = camera;
         this.ssaaRenderPass.camera = camera;
 
         this.options.cameraMode = "perspective";
@@ -711,8 +722,10 @@ export class Viewer
             getVector3FromPoint3d(clipping_plane.location)
           );
 
-          this.renderer.clippingPlanes.push(plane);
+          this.clippingPlanes.push(plane);
         });
+
+        this.emitEvent({ type: "changecuttingplanes" });
       }
     };
 
@@ -725,8 +738,8 @@ export class Viewer
     this.setActiveDragger();
     this.clearSlices();
     this.clearOverlay();
-
     this.clearSelected();
+
     this.showAll();
     this.explode();
 
@@ -777,7 +790,7 @@ export class Viewer
 
     const getClippingPlanes = (): IClippingPlane[] => {
       const clipping_planes = [];
-      this.renderer.clippingPlanes.forEach((plane: Plane) => {
+      this.clippingPlanes.forEach((plane: Plane) => {
         const clipping_plane = {
           location: getPoint3dFromVector3(plane.coplanarPoint(new Vector3())),
           direction: getPoint3dFromVector3(plane.normal),

package/src/Viewer/commands/index.ts

@@ -110,8 +110,8 @@ commands.registerCommand("left", (viewer) => setDefaultViewPosition(viewer, "lef
 commands.registerCommand("right", (viewer) => setDefaultViewPosition(viewer, "right"));
 commands.registerCommand("front", (viewer) => setDefaultViewPosition(viewer, "front"));
 commands.registerCommand("back", (viewer) => setDefaultViewPosition(viewer, "back"));
-commands.registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
 commands.registerCommand("se", (viewer) => setDefaultViewPosition(viewer, "se"));
+commands.registerCommand("sw", (viewer) => setDefaultViewPosition(viewer, "sw"));
 commands.registerCommand("ne", (viewer) => setDefaultViewPosition(viewer, "ne"));
 commands.registerCommand("nw", (viewer) => setDefaultViewPosition(viewer, "nw"));
 

package/src/Viewer/components/BackgroundComponent.ts

@@ -48,5 +48,6 @@ export class BackgroundComponent implements IComponent {
   syncOptions = () => {
     this.backgroundColor.setHex(0xffffff);
     this.viewer.renderer.setClearColor(this.backgroundColor);
+    this.viewer.update();
   };
 }

package/src/Viewer/components/CameraComponent.ts

@@ -32,14 +32,14 @@ export class CameraComponent implements IComponent {
   constructor(viewer: Viewer) {
     this.viewer = viewer;
     this.viewer.addEventListener("databasechunk", this.geometryEnd);
-    this.viewer.addEventListener("optionschange", this.optionsChange);
-    this.viewer.addEventListener("initialize", this.optionsChange);
+    this.viewer.addEventListener("optionschange", this.syncOptions);
+    this.viewer.addEventListener("initialize", this.syncOptions);
   }
 
   dispose() {
     this.viewer.removeEventListener("databasechunk", this.geometryEnd);
-    this.viewer.removeEventListener("optionschange", this.optionsChange);
-    this.viewer.removeEventListener("initialize", this.optionsChange);
+    this.viewer.removeEventListener("optionschange", this.syncOptions);
+    this.viewer.removeEventListener("initialize", this.syncOptions);
   }
 
   getCameraMode(camera: any): CameraMode {
@@ -67,7 +67,6 @@ export class CameraComponent implements IComponent {
 
     this.viewer.camera = camera;
     this.viewer.renderPass.camera = camera;
-    this.viewer.helpersPass.camera = camera;
     this.viewer.ssaaRenderPass.camera = camera;
 
     this.viewer.update();
@@ -114,7 +113,7 @@ export class CameraComponent implements IComponent {
     this.viewer.emitEvent({ type: "changecameramode", mode });
   }
 
-  optionsChange = () => {
+  syncOptions = () => {
     this.switchCameraMode(this.viewer.options.cameraMode);
   };
 

package/src/Viewer/{scenes/Helpers.ts → components/ClippingPlaneComponent.ts}

@@ -21,22 +21,32 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Scene, WebGLRenderer } from "three";
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
 
-export class Helpers extends Scene {
-  private oldAutoClear = false;
-  private oldClippingPlanes = [];
+export class ClippingPlaneComponent implements IComponent {
+  protected viewer: Viewer;
 
-  override onBeforeRender(renderer: WebGLRenderer): void {
-    this.oldAutoClear = renderer.autoClear;
-    this.oldClippingPlanes = renderer.clippingPlanes;
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
 
-    renderer.autoClear = false;
-    renderer.clippingPlanes = [];
+    this.viewer.addEventListener("geometryend", this.applyClippingPlanes);
+    this.viewer.addEventListener("changecuttingplanes", this.applyClippingPlanes);
   }
 
-  override onAfterRender(renderer: WebGLRenderer): void {
-    renderer.clippingPlanes = this.oldClippingPlanes;
-    renderer.autoClear = this.oldAutoClear;
+  dispose() {
+    this.viewer.removeEventListener("geometryend", this.applyClippingPlanes);
+    this.viewer.removeEventListener("changecuttingplanes", this.applyClippingPlanes);
   }
+
+  applyClippingPlanes = () => {
+    this.viewer.models.forEach((model) => {
+      model.scene.traverse((object: any) => {
+        if (object.material) {
+          const materials = Array.isArray(object.material) ? object.material : [object.material];
+          materials.forEach((material) => (material.clippingPlanes = this.viewer.clippingPlanes));
+        }
+      });
+    });
+  };
 }