Tweak example for FaceAlignedSectionPlanesPlugin #1088

xeokit · Jul 3, 2023 · 95a004f · 95a004f
1 parent e961f0f
commit 95a004f
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/examples/gizmos_FaceAlignedSectionPlanesPlugin.html b/examples/gizmos_FaceAlignedSectionPlanesPlugin.html
@@ -45,7 +45,10 @@
     <img class="info-icon" src="../assets/images/section_plane_icon.png"/>
     <h1>FaceAlignedSectionPlanesPlugin</h1>
     <h2>Slices models open to reveal internal structures</h2>
-    <p>This example loads an IFC2x3 BIM model, then with programmatically creates face-aligned section planes to slice it.</p>
+    <p>This example loads an IFC2x3 BIM model, then with programmatically creates face-aligned section planes
+        to slice it.</p>
+    <p>To edit the SectionPlane's position, ensure that you select it by clicking it in the
+        overview canvas, then drag vertically with mouse or touch input in the control area.</p>
     <h3>Components used</h3>
     <ul>
         <li>
@@ -78,7 +81,7 @@ <h3>Resources</h3>
     // Import the modules we need for this example
     //------------------------------------------------------------------------------------------------------------------
 
-    import {Viewer, XKTLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";
+    import {Viewer, XKTLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "../dist/xeokit-sdk.es.js";
 
     //------------------------------------------------------------------------------------------------------------------
     // Create a Viewer
@@ -106,11 +109,14 @@ <h3>Resources</h3>
     const sectionPlanes = new FaceAlignedSectionPlanesPlugin(viewer, {
         overviewCanvasId: "mySectionPlanesOverviewCanvas",
         controlElementId: "mySectionPlaneControlDiv",
-        overviewVisible: true
+        overviewVisible: true,
+        dragSensitivity: 1
     });
 
+    sectionPlanes.setDragSensitivity(1); // Set sensitivity of drag and touch input
+
     //------------------------------------------------------------------------------------------------------------------
-    // Load the .xkt model and IFC metadata
+    // Load the .xkt model
     //------------------------------------------------------------------------------------------------------------------
 
     const sceneModel = xktLoader.load({
@@ -121,7 +127,7 @@ <h3>Resources</h3>
     });
 
     //------------------------------------------------------------------------------------------------------------------
-    // Create a couple of cross-section planes
+    // Create a SectionPlane
     //------------------------------------------------------------------------------------------------------------------
 
     const sectionPlane = sectionPlanes.createSectionPlane({
@@ -130,6 +136,11 @@ <h3>Resources</h3>
         dir: [0.007873527603475804, 0.007873527603475804, -0.9999380056414271]
     });
 
+    //------------------------------------------------------------------------------------------------------------------
+    // Activate the drag control element for the SectionPlane
+    //------------------------------------------------------------------------------------------------------------------
+
+
     sectionPlanes.showControl(sectionPlane.id);
 
 </script>