@xeokit/xeokit-sdk 2.6.5 → 2.6.7

package/src/viewer/scene/postfx/CrossSections.js

@@ -0,0 +1,203 @@
+import {Component} from '../Component.js';
+
+/**
+ * @desc Configures cross-section slices for a {@link Scene}.
+ *
+ * ## Overview
+ *
+ * Cross-sections allow to create an additional colored slice for used clipping planes. It is only a visual effect
+ * calculated by shaders. It makes it easier to see the intersection between the model and the clipping plane this way.
+ *
+ * ## Usage
+ *
+ * In the example below, we'll configure CrossSections to manipulate the slice representation.
+ *
+ * ````javascript
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Import the modules we need for this example
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * import {PhongMaterial, Viewer, math, SectionPlanesPlugin, XKTLoaderPlugin, Mesh, ReadableGeometry, buildPolylineGeometryFromCurve, SplineCurve} from "../../dist/xeokit-sdk.es.js";
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a Viewer and arrange the camera
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * const viewer = new Viewer({
+ *   canvasId: "myCanvas",
+ *   transparent: true
+ * });
+ *
+ * viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
+ * viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
+ * viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];
+ *
+ * const cameraControl = viewer.cameraControl;
+ * cameraControl.navMode = "orbit";
+ * cameraControl.followPointer = true;
+ *
+ * //----------------------------------------------------------------------------------------------------------------------
+ * // Create a xeokit loader plugin, load a model, fit to view
+ * //----------------------------------------------------------------------------------------------------------------------
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * var t0 = performance.now();
+ *
+ * document.getElementById("time").innerHTML = "Loading model...";
+ *
+ * const sceneModel = xktLoader.load({
+ *   id: "myModel",
+ *   src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+ *   edges: true
+ * });
+ *
+ * sceneModel.on("loaded", () => {
+ *   var t1 = performance.now();
+ *   document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
+ *
+ *   let path = new SplineCurve(viewer.scene, {
+ *     points: [
+ *       [0, 0, -10],
+ *       [0, 0, -3],
+ *       [10, 0, 10],
+ *       [10, 0, 30],
+ *     ],
+ *   });
+ *
+ *   new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
+ *       id: "SplineCurve",
+ *       curve: path,
+ *       divisions: 50,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *       emissive: [1, 0, 0]
+ *     })
+ *   });
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Create a moving SectionPlane, that moves through the table models
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   const sectionPlanes = new SectionPlanesPlugin(viewer, {
+ *     overviewCanvasId: "mySectionPlanesOverviewCanvas",
+ *     overviewVisible: true
+ *   });
+ *
+ *   let currentPoint = path.getPoint(0);
+ *   let currentDirection = path.getTangent(0);
+ *
+ *   const sectionPlane = sectionPlanes.createSectionPlane({
+ *     id: "mySectionPlane",
+ *     pos: currentPoint,
+ *     dir: currentDirection
+ *   });
+ *
+ *   sectionPlanes.showControl(sectionPlane.id);
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Controlling SectionPlane position and direction
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   let currentT = 0.0;
+ *   document.getElementById("section_path").oninput = function() {
+ *     currentT = Number(document.getElementById("section_path").value);
+ *     currentPoint = path.getPoint(currentT);
+ *     currentDirection = path.getTangent(currentT);
+ *     sectionPlane.pos = currentPoint;
+ *     sectionPlane.dir = currentDirection;
+ *   };
+ *
+ *   window.viewer = viewer;
+ *
+ *   //------------------------------------------------------------------------------------------------------------------
+ *   // Controlling CrossSections settings
+ *   //------------------------------------------------------------------------------------------------------------------
+ *
+ *   viewer.scene.crossSections.sliceThickness = 0.05;
+ *   viewer.scene.crossSections.sliceColor = [0.0, 0.0, 0.0, 1.0];
+ * });
+ * ````
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/slicing/#SectionPlanesPlugin_Duplex_SectionPath_CrossSections)]
+ *
+ */
+class CrossSections extends Component {
+
+    /** @private */
+    constructor(owner, cfg = {}) {
+
+        super(owner, cfg);
+
+        this.sliceColor = cfg.sliceColor;
+        this.sliceThickness  = cfg.sliceThickness;
+    }
+
+    /**
+     * Sets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    set sliceThickness(value) {
+        if (value === undefined || value === null) {
+            value = 0.0;
+        }
+        if (this._sliceThickness === value) {
+            return;
+        }
+        this._sliceThickness = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    get sliceThickness() {
+        return this._sliceThickness;
+    }
+
+    /**
+     * Sets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    set sliceColor(value) {
+        if (value === undefined || value === null) {
+            value = [0.0, 0.0, 0.0, 1.0];
+        }
+        if (this._sliceColor === value) {
+            return;
+        }
+        this._sliceColor = value;
+        this.glRedraw();
+    }
+
+    /**
+     * Gets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    get sliceColor() {
+        return this._sliceColor;
+    }
+
+    /**
+     * Destroys this component.
+     */
+    destroy() {
+        super.destroy();
+    }
+}
+
+export {CrossSections};

package/src/viewer/scene/scene/Scene.js

@@ -16,6 +16,7 @@ import {EmphasisMaterial} from '../materials/EmphasisMaterial.js';
 import {EdgeMaterial} from '../materials/EdgeMaterial.js';
 import {Metrics} from "../metriqs/Metriqs.js";
 import {SAO} from "../postfx/SAO.js";
+import {CrossSections} from "../postfx/CrossSections.js";
 import {PointsMaterial} from "../materials/PointsMaterial.js";
 import {LinesMaterial} from "../materials/LinesMaterial.js";
 
@@ -840,6 +841,14 @@ class Scene extends Component {
             enabled: cfg.saoEnabled
         });
 
+        /** Configures Cross Sections for this Scene.
+         * @type {CrossSections}
+         * @final
+         */
+        this.crossSections = new CrossSections(this, {
+
+        });
+
         this.ticksPerRender = cfg.ticksPerRender;
         this.ticksPerOcclusionTest = cfg.ticksPerOcclusionTest;
         this.passes = cfg.passes;
@@ -2799,4 +2808,4 @@ class Scene extends Component {
     }
 }
 
-export {Scene};
+export {Scene};

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.d.ts

@@ -8,6 +8,7 @@ import {AngleMeasurementsPlugin} from "./AngleMeasurementsPlugin";
  * Once the AngleMeasurementControl is activated, the first click on any {@link Entity} begins constructing a {@link AngleMeasurement}, fixing its origin to that Entity. The next click on any Entity will complete the AngleMeasurement, fixing its target to that second Entity. The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing another AngleMeasurement, and so on, until deactivated.
  */
 export declare class AngleMeasurementsControl extends Component {
+
     /**
      * The {@link AngleMeasurementsPlugin} that owns this AngleMeasurementsControl.
      * @type {AngleMeasurementsPlugin}
@@ -86,4 +87,12 @@ export declare class AngleMeasurementsControl extends Component {
      * @param scope  Scope for the callback
      */
     on(event: "measurementStart", callback: (measurement: AngleMeasurement) => void, scope?: any): string
+
+    /**
+     * Fires when the control is (de)activated
+     * @param event The activation event
+     * @param callback Called fired on the event
+     * @param scope  Scope for the callback
+     */
+    on(event: "activated", callback: (activated: boolean) => void, scope?: any): string
 }

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.d.ts

@@ -1,7 +1,6 @@
 import { AngleMeasurementsControl } from "./AngleMeasurementsControl.js";
-import { math } from "../../viewer/scene/math/math.js";
 import {AngleMeasurementsPlugin} from "./AngleMeasurementsPlugin";
-import {PointerLens} from "../../extras/PointerLens/PointerLens";
+import {PointerLens} from "../../extras/";
 
 /**
  * Creates {@link AngleMeasurement}s in an {@link AngleMeasurementsPlugin} from mouse input.

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.d.ts

@@ -3,12 +3,16 @@ import { AngleMeasurement } from "./AngleMeasurement";
 import { AngleMeasurementsControl } from "./AngleMeasurementsControl";
 
 export declare type AngleMeasurementsPluginConfiguration = {
+
   /** Optional ID for this plugin, so that we can find it within {@link Viewer.plugins}. */
   id?: string;
+
   /** Container DOM element for markers and labels. Defaults to ````document.body````. */
   container?: HTMLElement;
+
   /** The default color of the dots, wire and label. */
   defaultColor?: string;
+
   /** If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels). */
   zIndex?: number;
 };

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurementsTouchControl.d.ts

@@ -0,0 +1,92 @@
+import { AngleMeasurementsControl } from "./AngleMeasurementsControl";
+import {AngleMeasurementsPlugin} from "./AngleMeasurementsPlugin";
+import {PointerLens} from "../../extras/";
+
+/**
+ * Creates {@link AngleMeasurement}s in an {@link AngleMeasurementsPlugin} from touch input.
+ *
+ * @example
+ * import { Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, PointerLens } from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ * });
+ *
+ * viewer.camera.eye = [-3.93, 2.85, 27.01];
+ * viewer.camera.look = [4.40, 3.72, 8.89];
+ * viewer.camera.up = [-0.01, 0.99, 0.039];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const sceneModel = xktLoader.load({
+ *     id: "myModel",
+ *     src: "Duplex.xkt"
+ * });
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const pointerLens = new PointerLens(viewer); // Create a PointerLens instance
+ *
+ * const angleMeasurementsTouchControl = new AngleMeasurementsTouchControl(angleMeasurements, {
+ *     pointerLens: pointerLens,
+ *     snapping: true
+ * });
+ *
+ * angleMeasurementsTouchControl.activate();
+ */
+export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
+
+    /**
+     * Creates a new AngleMeasurementsTouchControl.
+     *
+     * @param {AngleMeasurementsPlugin} angleMeasurementsPlugin The AngleMeasurementsPlugin to control.
+     * @param {Object} [cfg] Configuration options.
+     * @param {PointerLens} [cfg.pointerLens] A PointerLens to use for providing a magnified view of the cursor when snapping is enabled.
+     * @param {boolean} [cfg.snapping=true] Whether to initially enable snap-to-vertex and snap-to-edge for this AngleMeasurementsTouchControl.
+     */
+    constructor(angleMeasurementsPlugin: AngleMeasurementsPlugin, cfg?: {
+        pointerLens?: PointerLens;
+        snapping?: boolean;
+    });
+
+    /**
+     * Gets whether this AngleMeasurementsTouchControl is currently active, responding to input.
+     *
+     * @returns {boolean} True if active, false otherwise.
+     */
+    get active(): boolean;
+
+    /**
+     * Sets whether snap-to-vertex and snap-to-edge are enabled for this AngleMeasurementsTouchControl.
+     *
+     * @param {boolean} snapping True to enable snap-to-vertex and snap-to-edge, false to disable.
+     */
+    set snapping(snapping: boolean);
+
+    /**
+     * Gets whether snap-to-vertex and snap-to-edge are enabled for this AngleMeasurementsTouchControl.
+     *
+     * @returns {boolean} True if snap-to-vertex and snap-to-edge are enabled, false otherwise.
+     */
+    get snapping(): boolean;
+
+    /**
+     * Activates this AngleMeasurementsTouchControl, making it responsive to input.
+     */
+    activate(): void;
+
+    /**
+     * Deactivates this AngleMeasurementsTouchControl, making it unresponsive to input.
+     */
+    deactivate(): void;
+
+    /**
+     * Resets this AngleMeasurementsTouchControl, destroying any AngleMeasurement under construction.
+     */
+    reset(): void;
+
+    /**
+     * Destroys this AngleMeasurementsTouchControl.
+     */
+    destroy(): void;
+}

package/types/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsControl.d.ts

@@ -88,7 +88,7 @@ export declare class DistanceMeasurementsControl extends Component {
     on(event: "measurementStart", callback: (measurement: DistanceMeasurement) => void, scope?: any): string
 
     /**
-     * Fires when the the control is (de)activated
+     * Fires when the control is (de)activated
      * @param event The activation event
      * @param callback Called fired on the event
      * @param scope  Scope for the callback

package/types/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.d.ts

@@ -3,26 +3,37 @@ import { DistanceMeasurementsControl } from "./DistanceMeasurementsControl";
 import { DistanceMeasurement } from "./DistanceMeasurement";
 
 export declare type DistanceMeasurementsPluginConfiguration = {
+
   /** Optional ID for this plugin, so that we can find it within {@link Viewer.plugins}. */
   id?: string;
+
   /** The minimum length, in pixels, of an axis wire beyond which its label is shown. */
   labelMinAxisLength?: number;
+
   /** Container DOM element for markers and labels. Defaults to ````document.body````. */
   container?: HTMLElement;
+
   /** The default value of the DistanceMeasurements `visible` property. */
   defaultVisible?: boolean;
+
   /** The default value of the DistanceMeasurements `originVisible` property. */
   defaultOriginVisible?: boolean;
+
   /** The default value of the DistanceMeasurements `targetVisible` property. */
   defaultTargetVisible?: boolean;
+
   /** The default value of the DistanceMeasurements `wireVisible` property. */
   defaultWireVisible?: boolean;
+
   /** The default value of the DistanceMeasurements `axisVisible` property. */
   defaultAxisVisible?: boolean;
+
   /** The default color of the length dots, wire and label. */
   defaultColor?: string;
+
   /** The default value of the DistanceMeasurements `labelsOnWires` property. */
   defaultLabelsOnWires?: boolean;
+
   /** If set, the wires, dots and labels will have this zIndex (+1 for dots and +2 for labels). */
   zIndex?: number;
 };
@@ -31,7 +42,8 @@ export declare type DistanceMeasurementsPluginConfiguration = {
  * {@link Viewer} plugin for measuring point-to-point distances.
  */
 export declare class DistanceMeasurementsPlugin extends Plugin {
-  /**
+
+    /**
    * @constructor
    * @param {Viewer} viewer The Viewer.
    * @param {DistanceMeasurementsPluginConfiguration} [cfg]  Plugin configuration.
@@ -149,5 +161,4 @@ export declare class DistanceMeasurementsPlugin extends Plugin {
    * @param {Function} callback Callback fired on the event
    */
    on(event: "measurementDestroyed", callback: (measurement: DistanceMeasurement)=> void): string;
-  
 }

package/types/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsTouchControl.d.ts

@@ -0,0 +1,70 @@
+import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl";
+import {DistanceMeasurementsPlugin} from "./DistanceMeasurementsPlugin";
+import {PointerLens} from "../../extras/";
+
+/**
+ * Creates {@link DistanceMeasurement}s in a {@link DistanceMeasurementsPlugin} from touch input.
+ *
+ * @example
+ * // Usage
+ * const distanceMeasurementsControl = new DistanceMeasurementsTouchControl(distanceMeasurementsPlugin, {
+ *     pointerLens: new PointerLens(viewer),
+ *     snapping: true
+ * });
+ */
+export class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
+
+    /**
+     * Creates a DistanceMeasurementsTouchControl bound to the given DistanceMeasurementsPlugin.
+     *
+     * @param {DistanceMeasurementsPlugin} distanceMeasurementsPlugin The DistanceMeasurementsPlugin to control.
+     * @param {Object} cfg Configuration options.
+     * @param {PointerLens} [cfg.pointerLens] A PointerLens to provide a magnified view of the cursor when snapping is enabled.
+     * @param {boolean} [cfg.snapping=true] Whether to enable snap-to-vertex and snap-to-edge for this DistanceMeasurementsTouchControl.
+     */
+    constructor(distanceMeasurementsPlugin: DistanceMeasurementsPlugin, cfg?: {
+        pointerLens?: PointerLens;
+        snapping?: boolean;
+    });
+
+    /**
+     * Gets if this DistanceMeasurementsTouchControl is currently active, where it is responding to input.
+     *
+     * @returns {boolean} True if this DistanceMeasurementsTouchControl is active.
+     */
+    get active(): boolean;
+
+    /**
+     * Sets whether snap-to-vertex and snap-to-edge are enabled for this DistanceMeasurementsTouchControl.
+     *
+     * @param {boolean} snapping Whether to enable snap-to-vertex and snap-to-edge for this DistanceMeasurementsTouchControl.
+     */
+    set snapping(snapping: boolean);
+
+    /**
+     * Gets whether snap-to-vertex and snap-to-edge are enabled for this DistanceMeasurementsTouchControl.
+     *
+     * @returns {boolean} Whether snap-to-vertex and snap-to-edge are enabled for this DistanceMeasurementsTouchControl.
+     */
+    get snapping(): boolean;
+
+    /**
+     * Activates this DistanceMeasurementsTouchControl, ready to respond to input.
+     */
+    activate(): void;
+
+    /**
+     * Deactivates this DistanceMeasurementsTouchControl, making it unresponsive to input.
+     */
+    deactivate(): void;
+
+    /**
+     * Resets this DistanceMeasurementsTouchControl.
+     */
+    reset(): void;
+
+    /**
+     * Destroys this DistanceMeasurementsTouchControl.
+     */
+    destroy(): void;
+}

package/types/viewer/scene/postfx/CrossSections.d.ts

@@ -0,0 +1,42 @@
+import { Component } from "../Component";
+
+/**
+ * @desc Configures cross-section slices for a {@link Scene}.
+ */
+export declare class CrossSections extends Component {
+    /**
+     * Sets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    set sliceThickness(arg: number);
+
+    /**
+     * Gets the thickness of a slice created by a section.
+     *
+     * Default value is ````0.0````.
+     *
+     * @type {Number}
+     */
+    get sliceThickness(): number;
+
+    /**
+     * Sets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    set sliceColor(arg: number[]);
+
+    /**
+     * Gets the color of a slice created by a section.
+     *
+     * Default value is ````[0.0, 0.0, 0.0, 1.0]````.
+     *
+     * @type {Number}
+     */
+    get sliceColor(): number[];
+}