@xeokit/xeokit-sdk 2.5.2-beta-10 → 2.5.2-beta-13

package/src/src/plugins/FaceAlignedSectionPlanesPlugin/FaceAlignedSectionPlanesPlugin.js

@@ -0,0 +1,436 @@
+import {math} from "../../viewer/scene/math/math.js";
+import {Plugin} from "../../viewer/Plugin.js";
+import {SectionPlane} from "../../viewer/scene/sectionPlane/SectionPlane.js";
+import {FaceAlignedSectionPlanesControl} from "./FaceAlignedSectionPlanesControl.js";
+import {Overview} from "./Overview.js";
+
+const tempAABB = math.AABB3();
+const tempVec3 = math.vec3();
+
+/**
+ * FaceAlignedSectionPlanesPlugin is a {@link Viewer} plugin that creates and edits face-aligned {@link SectionPlane}s.
+ *
+ * [<img src="https://xeokit.github.io/xeokit-sdk/assets/images/FaceAlignedSectionPlanesPlugin.gif">](https://xeokit.github.io/xeokit-sdk/examples/#gizmos_FaceAlignedSectionPlanesPlugin)
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/#gizmos_FaceAlignedSectionPlanesPlugin)]
+ *
+ * ## Overview
+ *
+ * * Use the FaceAlignedSectionPlanesPlugin to
+ * create and edit {@link SectionPlane}s to slice portions off your models and reveal internal structures.
+ *
+ * * As shown in the screen capture above, FaceAlignedSectionPlanesPlugin shows an overview of all your SectionPlanes (on the right, in
+ * this example).
+ * * Click a plane in the overview to activate a 3D control with which you can interactively
+ * reposition its SectionPlane in the main canvas.
+ * * Configure the plugin with an HTML element that the user can click-and-drag on to reposition the SectionPlane for which the control is active.
+ * * Use {@link BCFViewpointsPlugin} to save and load SectionPlanes in BCF viewpoints.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll use a {@link GLTFLoaderPlugin} to load a model, and a FaceAlignedSectionPlanesPlugin
+ * to slice it open with two {@link SectionPlane}s. We'll show the overview in the bottom right of the Viewer
+ * canvas. Finally, we'll programmatically activate the 3D editing control, so that we can use it to interactively
+ * reposition our second SectionPlane.
+ *
+ * ````JavaScript
+ * import {Viewer, GLTFLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "xeokit-sdk.es.js";
+ *
+ * // Create a Viewer and arrange its Camera
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [-5.02, 2.22, 15.09];
+ * viewer.camera.look = [4.97, 2.79, 9.89];
+ * viewer.camera.up = [-0.05, 0.99, 0.02];
+ *
+ * // Add a GLTFLoaderPlugin
+ *
+ * const gltfLoader = new GLTFLoaderPlugin(viewer);
+ *
+ * // Add a FaceAlignedSectionPlanesPlugin, with overview visible
+ *
+ * const faceAlignedSectionPlanes = new FaceAlignedSectionPlanesPlugin(viewer, {
+ *     overviewCanvasID: "myOverviewCanvas",
+ *     overviewVisible: true,
+ *     controlElementId: "myControlElement", // ID of element to capture drag events that move the SectionPlane
+ *     dragSensitivity: 1  // Sensitivity factor that governs the rate at which dragging moves the SectionPlane
+ * });
+ *
+ * // Load a model
+ *
+ * const model = gltfLoader.load({
+ *     id: "myModel",
+ *     src: "./models/gltf/schependomlaan/scene.glb"
+ * });
+ *
+ * // Create a couple of section planes
+ * // These will be shown in the overview
+ *
+ * faceAlignedSectionPlanes.createSectionPlane({
+ *     id: "mySectionPlane",
+ *     pos: [1.04, 1.95, 9.74],
+ *     dir: [1.0, 0.0, 0.0]
+ * });
+ *
+ * faceAlignedSectionPlanes.createSectionPlane({
+ *     id: "mySectionPlane2",
+ *     pos: [2.30, 4.46, 14.93],
+ *     dir: [0.0, -0.09, -0.79]
+ * });
+ *
+ * // Show the FaceAlignedSectionPlanesPlugin's 3D editing gizmo,
+ * // to interactively reposition one of our SectionPlanes
+ *
+ * faceAlignedSectionPlanes.showControl("mySectionPlane2");
+ *
+ * const mySectionPlane2 = faceAlignedSectionPlanes.sectionPlanes["mySectionPlane2"];
+ *
+ * // Programmatically reposition one of our SectionPlanes
+ * // This also updates its position as shown in the overview gizmo
+ *
+ * mySectionPlane2.pos = [11.0, 6.0, -12];
+ * mySectionPlane2.dir = [0.4, 0.0, 0.5];
+ * ````
+ */
+export class FaceAlignedSectionPlanesPlugin extends Plugin {
+
+    /**
+     * @constructor
+     * @param {Viewer} viewer The Viewer.
+     * @param {Object} cfg Plugin configuration.
+     * @param {String} [cfg.id="SectionPlanes"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
+     * @param {String} [cfg.overviewCanvasId] ID of a canvas element to display the overview.
+     * @param {String} [cfg.overviewVisible=true] Initial visibility of the overview canvas.
+     * @param {String} cfg.controlElementId ID of an HTML element that catches drag events to move the active SectionPlane.
+     * @param {Number} [cfg.dragSensitivity=1] Sensitivity factor that governs the rate at which dragging on the control element moves SectionPlane.
+     */
+    constructor(viewer, cfg = {}) {
+
+        super("FaceAlignedSectionPlanesPlugin", viewer);
+
+        this._freeControls = [];
+        this._sectionPlanes = viewer.scene.sectionPlanes;
+        this._controls = {};
+        this._shownControlId = null;
+        this._dragSensitivity = cfg.dragSensitivity || 1;
+
+        if (cfg.overviewCanvasId !== null && cfg.overviewCanvasId !== undefined) {
+
+            const overviewCanvas = document.getElementById(cfg.overviewCanvasId);
+
+            if (!overviewCanvas) {
+                this.warn("Can't find overview canvas: '" + cfg.overviewCanvasId + "' - will create plugin without overview");
+
+            } else {
+
+                this._overview = new Overview(this, {
+                    overviewCanvas: overviewCanvas,
+                    visible: cfg.overviewVisible,
+
+                    onHoverEnterPlane: ((id) => {
+                        this._overview.setPlaneHighlighted(id, true);
+                    }),
+
+                    onHoverLeavePlane: ((id) => {
+                        this._overview.setPlaneHighlighted(id, false);
+                    }),
+
+                    onClickedPlane: ((id) => {
+                        if (this.getShownControl() === id) {
+                            this.hideControl();
+                            return;
+                        }
+                        this.showControl(id);
+                        const sectionPlane = this.sectionPlanes[id];
+                        const sectionPlanePos = sectionPlane.pos;
+                        tempAABB.set(this.viewer.scene.aabb);
+                        math.getAABB3Center(tempAABB, tempVec3);
+                        tempAABB[0] += sectionPlanePos[0] - tempVec3[0];
+                        tempAABB[1] += sectionPlanePos[1] - tempVec3[1];
+                        tempAABB[2] += sectionPlanePos[2] - tempVec3[2];
+                        tempAABB[3] += sectionPlanePos[0] - tempVec3[0];
+                        tempAABB[4] += sectionPlanePos[1] - tempVec3[1];
+                        tempAABB[5] += sectionPlanePos[2] - tempVec3[2];
+                        this.viewer.cameraFlight.flyTo({
+                            aabb: tempAABB,
+                            fitFOV: 65
+                        });
+                    }),
+
+                    onClickedNothing: (() => {
+                        this.hideControl();
+                    })
+                });
+            }
+        }
+
+        if (cfg.controlElementId === null || cfg.controlElementId === undefined) {
+            this.error("Parameter expected: controlElementId");
+        } else {
+            this._controlElement = document.getElementById(cfg.controlElementId);
+            if (!this._controlElement) {
+                this.warn("Can't find control element: '" + cfg.controlElementId + "' - will create plugin without control element");
+
+            }
+        }
+
+        this._onSceneSectionPlaneCreated = viewer.scene.on("sectionPlaneCreated", (sectionPlane) => {
+
+            // SectionPlane created, either via FaceAlignedSectionPlanesPlugin#createSectionPlane(), or by directly
+            // instantiating a SectionPlane independently of FaceAlignedSectionPlanesPlugin, which can be done
+            // by BCFViewpointsPlugin#loadViewpoint().
+
+            this._sectionPlaneCreated(sectionPlane);
+        });
+    }
+
+    /**
+     * Sets the factor that governs how fast a SectionPlane moves as we drag on the control element.
+     *
+     * @param {Number} dragSensitivity  The dragging sensitivity factor.
+     */
+    setDragSensitivity(dragSensitivity) {
+      this._dragSensitivity = dragSensitivity || 1;
+    }
+
+    /**
+     * Gets the factor that governs how fast a SectionPlane moves as we drag on the control element.
+     *
+     * @return {Number} The dragging sensitivity factor.
+     */
+    getDragSensitivity() {
+        return this._dragSensitivity;
+    }
+
+    /**
+     * Sets if the overview canvas is visible.
+     *
+     * @param {Boolean} visible Whether or not the overview canvas is visible.
+     */
+    setOverviewVisible(visible) {
+        if (this._overview) {
+            this._overview.setVisible(visible);
+        }
+    }
+
+    /**
+     * Gets if the overview canvas is visible.
+     *
+     * @return {Boolean} True when the overview canvas is visible.
+     */
+    getOverviewVisible() {
+        if (this._overview) {
+            return this._overview.getVisible();
+        }
+    }
+
+    /**
+     * Returns a map of the {@link SectionPlane}s created by this FaceAlignedSectionPlanesPlugin.
+     *
+     * @returns {{String:SectionPlane}} A map containing the {@link SectionPlane}s, each mapped to its {@link SectionPlane#id}.
+     */
+    get sectionPlanes() {
+        return this._sectionPlanes;
+    }
+
+    /**
+     * Creates a {@link SectionPlane}.
+     *
+     * The {@link SectionPlane} will be registered by {@link SectionPlane#id} in {@link FaceAlignedSectionPlanesPlugin#sectionPlanes}.
+     *
+     * @param {Object} params {@link SectionPlane} configuration.
+     * @param {String} [params.id] Unique ID to assign to the {@link SectionPlane}. Must be unique among all components in the {@link Viewer}'s {@link Scene}. Auto-generated when omitted.
+     * @param {Number[]} [params.pos=[0,0,0]] World-space position of the {@link SectionPlane}.
+     * @param {Number[]} [params.dir=[0,0,-1]] World-space vector indicating the orientation of the {@link SectionPlane}.
+     * @param {Boolean} [params.active=true] Whether the {@link SectionPlane} is initially active. Only clips while this is true.
+     * @returns {SectionPlane} The new {@link SectionPlane}.
+     */
+    createSectionPlane(params = {}) {
+
+        if (params.id !== undefined && params.id !== null && this.viewer.scene.components[params.id]) {
+            this.error("Viewer component with this ID already exists: " + params.id);
+            delete params.id;
+        }
+
+        // Note that SectionPlane constructor fires "sectionPlaneCreated" on the Scene,
+        // which FaceAlignedSectionPlanesPlugin handles and calls #_sectionPlaneCreated to create gizmo and add to overview canvas.
+
+        const sectionPlane = new SectionPlane(this.viewer.scene, {
+            id: params.id,
+            pos: params.pos,
+            dir: params.dir,
+            active: true || params.active
+        });
+        return sectionPlane;
+    }
+
+    _sectionPlaneCreated(sectionPlane) {
+        const control = (this._freeControls.length > 0) ? this._freeControls.pop() : new FaceAlignedSectionPlanesControl(this);
+        control._setSectionPlane(sectionPlane);
+        control.setVisible(false);
+        this._controls[sectionPlane.id] = control;
+        if (this._overview) {
+            this._overview.addSectionPlane(sectionPlane);
+        }
+        sectionPlane.once("destroyed", () => {
+            this._sectionPlaneDestroyed(sectionPlane);
+        });
+    }
+
+    /**
+     * Inverts the direction of {@link SectionPlane#dir} on every existing SectionPlane.
+     *
+     * Inverts all SectionPlanes, including those that were not created with FaceAlignedSectionPlanesPlugin.
+     */
+    flipSectionPlanes() {
+        const sectionPlanes = this.viewer.scene.sectionPlanes;
+        for (let id in sectionPlanes) {
+            const sectionPlane = sectionPlanes[id];
+            sectionPlane.flipDir();
+        }
+    }
+
+    /**
+     * Shows the 3D editing gizmo for a {@link SectionPlane}.
+     *
+     * @param {String} id ID of the {@link SectionPlane}.
+     */
+    showControl(id) {
+        const control = this._controls[id];
+        if (!control) {
+            this.error("Control not found: " + id);
+            return;
+        }
+        this.hideControl();
+        control.setVisible(true);
+        if (this._overview) {
+            this._overview.setPlaneSelected(id, true);
+        }
+        this._shownControlId = id;
+    }
+
+    /**
+     * Gets the ID of the {@link SectionPlane} that the 3D editing gizmo is shown for.
+     *
+     * Returns ````null```` when the editing gizmo is not shown.
+     *
+     * @returns {String} ID of the the {@link SectionPlane} that the 3D editing gizmo is shown for, if shown, else ````null````.
+     */
+    getShownControl() {
+        return this._shownControlId;
+    }
+
+    /**
+     * Hides the 3D {@link SectionPlane} editing gizmo if shown.
+     */
+    hideControl() {
+        for (let id in this._controls) {
+            if (this._controls.hasOwnProperty(id)) {
+                this._controls[id].setVisible(false);
+                if (this._overview) {
+                    this._overview.setPlaneSelected(id, false);
+                }
+            }
+        }
+        this._shownControlId = null;
+    }
+
+    /**
+     * Destroys a {@link SectionPlane} created by this FaceAlignedSectionPlanesPlugin.
+     *
+     * @param {String} id ID of the {@link SectionPlane}.
+     */
+    destroySectionPlane(id) {
+        let sectionPlane = this.viewer.scene.sectionPlanes[id];
+        if (!sectionPlane) {
+            this.error("SectionPlane not found: " + id);
+            return;
+        }
+        this._sectionPlaneDestroyed(sectionPlane);
+        sectionPlane.destroy();
+
+        if (id === this._shownControlId) {
+            this._shownControlId = null;
+        }
+    }
+
+    _sectionPlaneDestroyed(sectionPlane) {
+        if (this._overview) {
+            this._overview.removeSectionPlane(sectionPlane);
+        }
+        const control = this._controls[sectionPlane.id];
+        if (!control) {
+            return;
+        }
+        control.setVisible(false);
+        control._setSectionPlane(null);
+        delete this._controls[sectionPlane.id];
+        this._freeControls.push(control);
+    }
+
+    /**
+     * Destroys all {@link SectionPlane}s created by this FaceAlignedSectionPlanesPlugin.
+     */
+    clear() {
+        const ids = Object.keys(this._sectionPlanes);
+        for (let i = 0, len = ids.length; i < len; i++) {
+            this.destroySectionPlane(ids[i]);
+        }
+    }
+
+    /**
+     * @private
+     */
+    send(name, value) {
+        switch (name) {
+
+            case "snapshotStarting": // Viewer#getSnapshot() about to take snapshot - hide controls
+                for (let id in this._controls) {
+                    if (this._controls.hasOwnProperty(id)) {
+                        this._controls[id].setCulled(true);
+                    }
+                }
+                break;
+
+            case "snapshotFinished": // Viewer#getSnapshot() finished taking snapshot - show controls again
+                for (let id in this._controls) {
+                    if (this._controls.hasOwnProperty(id)) {
+                        this._controls[id].setCulled(false);
+                    }
+                }
+                break;
+
+            case "clearSectionPlanes":
+                this.clear();
+                break;
+        }
+    }
+
+    /**
+     * Destroys this FaceAlignedSectionPlanesPlugin.
+     *
+     * Also destroys each {@link SectionPlane} created by this FaceAlignedSectionPlanesPlugin.
+     *
+     * Does not destroy the canvas the FaceAlignedSectionPlanesPlugin was configured with.
+     */
+    destroy() {
+        this.clear();
+        if (this._overview) {
+            this._overview.destroy();
+        }
+        this._destroyFreeControls();
+        super.destroy();
+    }
+
+    _destroyFreeControls() {
+        let control = this._freeControls.pop();
+        while (control) {
+            control._destroy();
+            control = this._freeControls.pop();
+        }
+        this.viewer.scene.off(this._onSceneSectionPlaneCreated);
+    }
+}

package/src/src/plugins/FaceAlignedSectionPlanesPlugin/Overview.js

@@ -0,0 +1,247 @@
+import {math} from "../../viewer/scene/math/math.js";
+import {Scene} from "../../viewer/scene/scene/Scene.js";
+import {DirLight} from "./../../viewer/scene/lights/DirLight.js";
+import {Plane} from "./Plane.js";
+
+/**
+ * @desc An interactive 3D overview for navigating the {@link SectionPlane}s created by its {@link FaceAlignedSectionPlanesPlugin}.
+ *
+ * * Located at {@link FaceAlignedSectionPlanesPlugin#overview}.
+ * * Renders the overview on a separate canvas at a corner of the {@link Viewer}'s {@link Scene} {@link Canvas}.
+ * * The overview shows a 3D plane object for each {@link SectionPlane} in the {@link Scene}.
+ * * Click a plane object in the overview to toggle the visibility of a 3D gizmo to edit the position and orientation of its {@link SectionPlane}.
+ *
+ * @private
+ */
+export class Overview {
+
+    /**
+     * @private
+     */
+    constructor(plugin, cfg) {
+
+        if (!cfg.onHoverEnterPlane || !cfg.onHoverLeavePlane || !cfg.onClickedNothing || !cfg.onClickedPlane) {
+            throw "Missing config(s): onHoverEnterPlane, onHoverLeavePlane, onClickedNothing || onClickedPlane";
+        }
+
+        /**
+         * The {@link FaceAlignedSectionPlanesPlugin} that owns this SectionPlanesOverview.
+         *
+         * @type {FaceAlignedSectionPlanesPlugin}
+         */
+        this.plugin = plugin;
+
+        this._viewer = plugin.viewer;
+
+        this._onHoverEnterPlane = cfg.onHoverEnterPlane;
+        this._onHoverLeavePlane = cfg.onHoverLeavePlane;
+        this._onClickedNothing = cfg.onClickedNothing;
+        this._onClickedPlane = cfg.onClickedPlane;
+        this._visible = true;
+
+        this._planes = {};
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Init canvas
+        //--------------------------------------------------------------------------------------------------------------
+
+        this._canvas = cfg.overviewCanvas;
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Init scene
+        //--------------------------------------------------------------------------------------------------------------
+
+        this._scene = new Scene(this._viewer, {
+            canvasId: this._canvas.id,
+            transparent: true
+        });
+        this._scene.clearLights();
+        new DirLight(this._scene, {
+            dir: [0.4, -0.4, 0.8],
+            color: [0.8, 1.0, 1.0],
+            intensity: 1.0,
+            space: "view"
+        });
+        new DirLight(this._scene, {
+            dir: [-0.8, -0.3, -0.4],
+            color: [0.8, 0.8, 0.8],
+            intensity: 1.0,
+            space: "view"
+        });
+        new DirLight(this._scene, {
+            dir: [0.8, -0.6, -0.8],
+            color: [1.0, 1.0, 1.0],
+            intensity: 1.0,
+            space: "view"
+        });
+
+        this._scene.camera;
+        this._scene.camera.perspective.fov = 70;
+
+        this._zUp = false;
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Synchronize overview scene camera with viewer camera
+        //--------------------------------------------------------------------------------------------------------------
+
+        {
+            const camera = this._scene.camera;
+            const matrix = math.rotationMat4c(-90 * math.DEGTORAD, 1, 0, 0);
+            const eyeLookVec = math.vec3();
+            const eyeLookVecOverview = math.vec3();
+            const upOverview = math.vec3();
+
+            this._synchCamera = () => {
+                const eye = this._viewer.camera.eye;
+                const look = this._viewer.camera.look;
+                const up = this._viewer.camera.up;
+                math.mulVec3Scalar(math.normalizeVec3(math.subVec3(eye, look, eyeLookVec)), 7);
+                if (this._zUp) { // +Z up
+                    math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+                    math.transformVec3(matrix, up, upOverview);
+                    camera.look = [0, 0, 0];
+                    camera.eye = math.transformVec3(matrix, eyeLookVec, eyeLookVecOverview);
+                    camera.up = math.transformPoint3(matrix, up, upOverview);
+                } else { // +Y up
+                    camera.look = [0, 0, 0];
+                    camera.eye = eyeLookVec;
+                    camera.up = up;
+                }
+            };
+        }
+
+        this._onViewerCameraMatrix = this._viewer.camera.on("matrix", this._synchCamera);
+
+        this._onViewerCameraWorldAxis = this._viewer.camera.on("worldAxis", this._synchCamera);
+
+        this._onViewerCameraFOV = this._viewer.camera.perspective.on("fov", (fov) => {
+            this._scene.camera.perspective.fov = fov;
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Bind overview canvas events
+        //--------------------------------------------------------------------------------------------------------------
+
+        {
+            var hoveredEntity = null;
+
+            this._onInputMouseMove = this._scene.input.on("mousemove", (coords) => {
+                const hit = this._scene.pick({
+                    canvasPos: coords
+                });
+                if (hit) {
+                    if (!hoveredEntity || hit.entity.id !== hoveredEntity.id) {
+                        if (hoveredEntity) {
+                            const plane = this._planes[hoveredEntity.id];
+                            if (plane) {
+                                this._onHoverLeavePlane(hoveredEntity.id);
+                            }
+                        }
+                        hoveredEntity = hit.entity;
+                        const plane = this._planes[hoveredEntity.id];
+                        if (plane) {
+                            this._onHoverEnterPlane(hoveredEntity.id);
+                        }
+                    }
+                } else {
+                    if (hoveredEntity) {
+                        this._onHoverLeavePlane(hoveredEntity.id);
+                        hoveredEntity = null;
+                    }
+                }
+            });
+
+            this._scene.canvas.canvas.addEventListener("mouseup", this._onCanvasMouseUp = () => {
+                if (hoveredEntity) {
+                    const plane = this._planes[hoveredEntity.id];
+                    if (plane) {
+                        this._onClickedPlane(hoveredEntity.id);
+                    }
+                } else {
+                    this._onClickedNothing();
+                }
+            });
+
+            this._scene.canvas.canvas.addEventListener("mouseout", this._onCanvasMouseOut = () => {
+                if (hoveredEntity) {
+                    this._onHoverLeavePlane(hoveredEntity.id);
+                    hoveredEntity = null;
+                }
+            });
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Configure overview
+        //--------------------------------------------------------------------------------------------------------------
+
+        this.setVisible(cfg.overviewVisible);
+    }
+
+    /** Called by SectionPlanesPlugin#createSectionPlane()
+     * @private
+     */
+    addSectionPlane(sectionPlane) {
+        this._planes[sectionPlane.id] = new Plane(this, this._scene, sectionPlane);
+    }
+
+    /**  @private
+     */
+    setPlaneHighlighted(id, highlighted) {
+        const plane = this._planes[id];
+        if (plane) {
+            plane.setHighlighted(highlighted);
+        }
+    }
+
+    /**  @private
+     */
+    setPlaneSelected(id, selected) {
+        const plane = this._planes[id];
+        if (plane) {
+            plane.setSelected(selected);
+        }
+    }
+
+    /** @private
+     */
+    removeSectionPlane(sectionPlane) {
+        const plane = this._planes[sectionPlane.id];
+        if (plane) {
+            plane.destroy();
+            delete this._planes[sectionPlane.id];
+        }
+    }
+
+    /**
+     * Sets if this SectionPlanesOverview is visible.
+     *
+     * @param {Boolean} visible Whether or not this SectionPlanesOverview is visible.
+     */
+    setVisible(visible = true) {
+        this._visible = visible;
+        this._canvas.style.visibility = visible ? "visible" : "hidden";
+    }
+
+    /**
+     * Gets if this SectionPlanesOverview is visible.
+     *
+     * @return {Boolean} True when this SectionPlanesOverview is visible.
+     */
+    getVisible() {
+        return this._visible;
+    }
+
+    /**  @private
+     */
+    destroy() {
+        this._viewer.camera.off(this._onViewerCameraMatrix);
+        this._viewer.camera.off(this._onViewerCameraWorldAxis);
+        this._viewer.camera.perspective.off(this._onViewerCameraFOV);
+
+        this._scene.input.off(this._onInputMouseMove);
+        this._scene.canvas.canvas.removeEventListener("mouseup", this._onCanvasMouseUp);
+        this._scene.canvas.canvas.removeEventListener("mouseout", this._onCanvasMouseOut);
+        this._scene.destroy();
+    }
+}
+