Moved section caps inside the SDK. Updated examples.

examples/slicing/SectionCapsPlugin.html

@@ -38,7 +38,7 @@ <h3>Components Used</h3>
 
 <script type="module">
 
-    import {Viewer, SceneModel, SectionPlanesPlugin, SectionCapsPlugin, math} from "../../dist/xeokit-sdk.min.es.js";
+    import {Viewer, SceneModel, SectionPlanesPlugin, PhongMaterial, Texture, LinearEncoding, math} from "../../dist/xeokit-sdk.min.es.js";
 
     const viewer = new Viewer({
         canvasId: "myCanvas",
@@ -91,15 +91,10 @@ <h3>Components Used</h3>
         id: "redLeg",
         meshIds: ["redLegMesh"],
         isObject: true,
-        capMaterial: new MetallicMaterial(viewer.scene, {
-            baseColor: [1, 0, 0],
+    }).capMaterial = new PhongMaterial(viewer.scene, {
+            diffuse: [1, 0.3, 0.3],
             backfaces: true,
-            baseColorMap: new Texture(viewer.scene, {
-                src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
-                encoding: "sRGB"
-            }),
-        })
-    });
+        });
 
     sceneModel.createMesh({
         id: "greenLegMesh",
@@ -114,15 +109,10 @@ <h3>Components Used</h3>
         id: "greenLeg",
         meshIds: ["greenLegMesh"],
         isObject: true,
-        capMaterial: new MetallicMaterial(viewer.scene, {
-            baseColor: [0, 1, 0],
+    }).capMaterial = new PhongMaterial(viewer.scene, {
+            diffuse: [0.3, 1.0, 0.3],
             backfaces: true,
-            baseColorMap: new Texture(viewer.scene, {
-                src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
-                encoding: "sRGB"
-            }),
-        })
-    });
+        });
 
     sceneModel.createMesh({
         id: "blueLegMesh",
@@ -137,15 +127,10 @@ <h3>Components Used</h3>
         id: "blueLeg",
         meshIds: ["blueLegMesh"],
         isObject: true,
-        capMaterial: new MetallicMaterial(viewer.scene, {
-            baseColor: [0, 0, 1],
+    }).capMaterial = new PhongMaterial(viewer.scene, {
+            diffuse: [0.3, 0.3, 1.0],
             backfaces: true,
-            baseColorMap: new Texture(viewer.scene, {
-                src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
-                encoding: "sRGB"
-            }),
-        })
-    });
+        });
 
     sceneModel.createMesh({
         id: "yellowLegMesh",
@@ -160,15 +145,10 @@ <h3>Components Used</h3>
         id: "yellowLeg",
         meshIds: ["yellowLegMesh"],
         isObject: true,
-        capMaterial: new MetallicMaterial(viewer.scene, {
-            baseColor: [1, 0, 1],
+    }).capMaterial = new PhongMaterial(viewer.scene, {
+            diffuse: [1.0, 1.0, 0.0],
             backfaces: true,
-            baseColorMap: new Texture(viewer.scene, {
-                src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
-                encoding: "sRGB"
-            }),
-        })
-    });
+        });
 
     sceneModel.createMesh({
         id: "purpleTableTopMesh",
@@ -179,39 +159,34 @@ <h3>Components Used</h3>
         color: [1.0, 0.3, 1.0]
     });
 
-    sceneModel.createEntity({
+    const purpleTableTop = sceneModel.createEntity({
         id: "purpleTableTop",
         meshIds: ["purpleTableTopMesh"],
         isObject: true,
-        capMaterial: new MetallicMaterial(viewer.scene, {
-            baseColor: [1,1,1],
-            metallic: 1.0,
-            roughness: 1.0,
+    }).capMaterial = new PhongMaterial(viewer.scene, {
+            diffuse: [1,1,1],
             backfaces: true,
-            baseColorMap: new Texture(viewer.scene, {
-                src: "../../assets/models/obj/fireHydrant/fire_hydrant_Base_Color.png",
-                encoding: "sRGB"
+            diffuseMap: new Texture(viewer.scene, {
+                src: "../../assets/textures/diffuse/uvGrid2.jpg",
+                encoding: LinearEncoding
             }),
-        })
-    });
+        });
 
     sceneModel.finalize();
 
-    const sectionCaps = new SectionCapsPlugin(viewer, {})
-
-    window.sectionCaps = sectionCaps;
-
     const sectionPlanes = new SectionPlanesPlugin(viewer, {
         overviewCanvasId: "mySectionPlanesOverviewCanvas",
         overviewVisible: true,
     });
 
     const sectionPlane = sectionPlanes.createSectionPlane({
         id: "mySectionPlane",
-        pos: [0.5, 2.5, 5.0],
+        pos: [-2.20, 2.5, 2.3],
         dir: math.normalizeVec3([1.0, 0.01, 1])
     });
 
+    window.sectionPlane = sectionPlane;
+
     sectionPlanes.showControl(sectionPlane.id);
 
 

examples/slicing/SectionPlanesPlugin_Duplex_SectionCaps.html

@@ -55,14 +55,7 @@ <h3>Resources</h3>
     // Import the modules we need for this example
     //------------------------------------------------------------------------------------------------------------------
 
-    import { Viewer, SectionPlanesPlugin, SceneModel, XKTLoaderPlugin, SectionCapsPlugin, math } from "../../dist/xeokit-sdk.min.es.js";
-
-    //------------------------------------------------------------------------------------------------------------------
-    // Helping variables
-    //------------------------------------------------------------------------------------------------------------------
-
-    let prevIntersectionModels = {};
-    let posTimeout = null, dirTimeout = null;
+    import { Viewer, SceneModel, XKTLoaderPlugin, SectionPlanesPlugin, PhongMaterial, math } from "../../dist/xeokit-sdk.min.es.js";
 
     //------------------------------------------------------------------------------------------------------------------
     // Create a Viewer and arrange the camera
@@ -103,6 +96,16 @@ <h3>Resources</h3>
         var t1 = performance.now();
         document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
 
+        //------------------------------------------------------------------------------------------------------------------
+        // Add caps materials to all objects inside the loaded model that have an opacity equal to or above 0.7
+        //------------------------------------------------------------------------------------------------------------------        
+        const opacityThreshold = 0.7;
+        const material = new PhongMaterial(viewer.scene,{
+            diffuse: [1.0, 0.0, 0.0],
+            backfaces: true
+        });
+        addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material);
+
         //------------------------------------------------------------------------------------------------------------------
         // Create a moving SectionPlane, that moves through the table models
         //------------------------------------------------------------------------------------------------------------------
@@ -112,14 +115,6 @@ <h3>Resources</h3>
             overviewVisible: true,
         });
 
-        //------------------------------------------------------------------------------------------------------------------
-        // Create a SectionCaps plugin instance to cap the objects that will be sliced through the section planes
-        //------------------------------------------------------------------------------------------------------------------
-
-        const sectionCaps = new SectionCapsPlugin(viewer, {})
-
-        window.sectionCaps = sectionCaps;
-
         const sectionPlane = sectionPlanes.createSectionPlane({
             id: "mySectionPlane",
             pos: [0.5, 2.5, 5.0],
@@ -140,6 +135,15 @@ <h3>Resources</h3>
 
     });
 
+    function addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material) {
+        const allObjects = sceneModel.objects;
+        for(const key in allObjects){
+            const object = allObjects[key];
+            if(object.opacity >= opacityThreshold)
+                object.capMaterial = material;
+        }
+    }
+
 
 </script>
 

src/plugins/index.js

@@ -7,7 +7,6 @@ export * from "./FastNavPlugin/index.js";
 export * from "./GLTFLoaderPlugin/index.js";
 export * from "./NavCubePlugin/index.js";
 export * from "./OBJLoaderPlugin/index.js";
-export * from "./SectionCapsPlugin/index.js";
 export * from "./SectionPlanesPlugin/index.js";
 export * from "./StoreyViewsPlugin/index.js";
 export * from "./FaceAlignedSectionPlanesPlugin/index.js";

src/viewer/scene/model/SceneModelEntity.js

@@ -647,10 +647,8 @@ export class SceneModelEntity {
     }
 
     set capMaterial(value) {
-        if ((value instanceof Material) || value === null)
-            this._capMaterial = value;
-        else
-            throw new Error("SceneModelEntity: Unsupported capMaterial type.");
+        this._capMaterial = value instanceof Material ? value : null;
+        this.scene._capMaterialUpdated();
     }
 
     get capMaterial() {

src/viewer/scene/scene/Scene.js

@@ -19,6 +19,7 @@ import {SAO} from "../postfx/SAO.js";
 import {CrossSections} from "../postfx/CrossSections.js";
 import {PointsMaterial} from "../materials/PointsMaterial.js";
 import {LinesMaterial} from "../materials/LinesMaterial.js";
+import {SectionCaps} from '../sectionCaps/SectionCaps.js';
 
 // Enables runtime check for redundant calls to object state update methods, eg. Scene#_objectVisibilityUpdated
 const ASSERT_OBJECT_STATE_UPDATE = false;
@@ -887,6 +888,8 @@ class Scene extends Component {
             dontClear: true // Never destroy this component with Scene#clear();
         });
 
+        this._sectionCaps = new SectionCaps(this);
+
         // Default lights
 
         new AmbientLight(this, {
@@ -988,6 +991,10 @@ class Scene extends Component {
     // Scene. Violates Hollywood Principle, where we could just filter on type in _addComponent,
     // but this is faster than checking the type of each component in such a filter.
 
+    _capMaterialUpdated() {
+        this._sectionCaps._onCapMaterialUpdated();
+    }
+
     _sectionPlaneCreated(sectionPlane) {
         this.sectionPlanes[sectionPlane.id] = sectionPlane;
         this.scene._sectionPlanesState.addSectionPlane(sectionPlane._state);
@@ -2796,6 +2803,9 @@ class Scene extends Component {
             }
         }
 
+        //destroy section caps separately because it's not a component
+        this._sectionCaps.destroy();
+
         this.canvas.gl = null;
 
         // Memory leak prevention
@@ -2818,6 +2828,7 @@ class Scene extends Component {
         this._highlightedObjectIds = null;
         this._selectedObjectIds = null;
         this._colorizedObjectIds = null;
+        this._sectionCaps = null;
         this.types = null;
         this.components = null;
         this.canvas = null;