@xeokit/xeokit-sdk 2.6.6 → 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/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[];
+}