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

package/src/src/plugins/SectionPlanesPlugin/Overview.js

@@ -0,0 +1,249 @@
+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 SectionPlanesPlugin}.
+ *
+ * * Located at {@link SectionPlanesPlugin#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
+ */
+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 SectionPlanesPlugin} that owns this SectionPlanesOverview.
+         *
+         * @type {SectionPlanesPlugin}
+         */
+        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();
+    }
+}
+
+export {Overview};
+

package/src/src/plugins/SectionPlanesPlugin/Plane.js

@@ -0,0 +1,169 @@
+import {math} from "../../viewer/scene/math/math.js";
+import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
+import {ReadableGeometry} from "../../viewer/scene/geometry/ReadableGeometry.js";
+import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
+import {buildBoxGeometry} from "../../viewer/scene/geometry/builders/buildBoxGeometry.js";
+import {EdgeMaterial} from "../../viewer/scene/materials/EdgeMaterial.js";
+import {EmphasisMaterial} from "../../viewer/scene/materials/EmphasisMaterial.js";
+
+
+/**
+ * Renders a 3D plane within an {@link Overview} to indicate its {@link SectionPlane}'s current position and orientation.
+ *
+ * @private
+ */
+class Plane {
+
+    /** @private */
+    constructor(overview, overviewScene, sectionPlane) {
+
+        /**
+         * The ID of this SectionPlanesOverviewPlane.
+         *
+         * @type {String}
+         */
+        this.id = sectionPlane.id;
+
+        /**
+         * The {@link SectionPlane} represented by this SectionPlanesOverviewPlane.
+         *
+         * @type {SectionPlane}
+         */
+        this._sectionPlane = sectionPlane;
+
+        this._mesh = new Mesh(overviewScene, {
+            id: sectionPlane.id,
+            geometry: new ReadableGeometry(overviewScene, buildBoxGeometry({
+                xSize: .5,
+                ySize: .5,
+                zSize: .001
+            })),
+            material: new PhongMaterial(overviewScene, {
+                emissive: [1, 1, 1],
+                diffuse: [0, 0, 0],
+                backfaces: false
+            }),
+            edgeMaterial: new EdgeMaterial(overviewScene, {
+                edgeColor: [0.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            highlightMaterial: new EmphasisMaterial(overviewScene, {
+                fill: true,
+                fillColor: [0.5, 1, 0.5],
+                fillAlpha: 0.7,
+                edges: true,
+                edgeColor: [0.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            selectedMaterial: new EmphasisMaterial(overviewScene, {
+                fill: true,
+                fillColor: [0, 0, 1],
+                fillAlpha: 0.7,
+                edges: true,
+                edgeColor: [1.0, 0.0, 0.0],
+                edgeAlpha: 1.0,
+                edgeWidth: 1
+            }),
+            highlighted: true,
+            scale: [3, 3, 3],
+            position: [0, 0, 0],
+            rotation: [0, 0, 0],
+            opacity: 0.3,
+            edges: true
+        });
+
+
+        {
+            const vec = math.vec3([0, 0, 0]);
+            const pos2 = math.vec3();
+            const zeroVec = math.vec3([0, 0, 1]);
+            const quat = math.vec4(4);
+            const pos3 = math.vec3();
+
+            const update = () => {
+
+                const origin = this._sectionPlane.scene.center;
+
+                const negDir = [-this._sectionPlane.dir[0], -this._sectionPlane.dir[1], -this._sectionPlane.dir[2]];
+                math.subVec3(origin, this._sectionPlane.pos, vec);
+                const dist = -math.dotVec3(negDir, vec);
+
+                math.normalizeVec3(negDir);
+                math.mulVec3Scalar(negDir, dist, pos2);
+                const quaternion = math.vec3PairToQuaternion(zeroVec, this._sectionPlane.dir, quat);
+
+                pos3[0] = pos2[0] * 0.1;
+                pos3[1] = pos2[1] * 0.1;
+                pos3[2] = pos2[2] * 0.1;
+
+                this._mesh.quaternion = quaternion;
+                this._mesh.position = pos3;
+            };
+
+            this._onSectionPlanePos = this._sectionPlane.on("pos", update);
+            this._onSectionPlaneDir = this._sectionPlane.on("dir", update);
+
+            // update();
+        }
+
+        this._highlighted = false;
+        this._selected = false;
+    }
+
+    /**
+     * Sets if this SectionPlanesOverviewPlane is highlighted.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    setHighlighted(highlighted) {
+        this._highlighted = !!highlighted;
+        this._mesh.highlighted = this._highlighted;
+        this._mesh.highlightMaterial.fillColor = highlighted ? [0, 0.7, 0] : [0, 0, 0];
+        // this._selectedMesh.highlighted = true;
+    }
+
+    /**
+     * Gets if this SectionPlanesOverviewPlane is highlighted.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    getHighlighted() {
+        return this._highlighted;
+    }
+
+    /**
+     * Sets if this SectionPlanesOverviewPlane is selected.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    setSelected(selected) {
+        this._selected = !!selected;
+        this._mesh.edgeMaterial.edgeWidth = selected ? 3 : 1;
+        this._mesh.highlightMaterial.edgeWidth = selected ? 3 : 1;
+
+    }
+
+    /**
+     * Gets if this SectionPlanesOverviewPlane is selected.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    getSelected() {
+        return this._selected;
+    }
+
+    /** @private */
+    destroy() {
+        this._sectionPlane.off(this._onSectionPlanePos);
+        this._sectionPlane.off(this._onSectionPlaneDir);
+        this._mesh.destroy();
+    }
+}
+
+export {Plane};