Merge remote-tracking branch 'origin/master'

xeokit · Jan 23, 2025 · 7e6cfc9 · 7e6cfc9
2 parents 3d5c466 + b8166ec
commit 7e6cfc9
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 10 deletions.
diff --git a/examples/slicing/SectionPlanesPlugin_createWithTouch.html b/examples/slicing/SectionPlanesPlugin_createWithTouch.html
@@ -0,0 +1,143 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>xeokit Example</title>
+    <link href="../css/pageStyle.css" rel="stylesheet"/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
+    <style>
+        #mySectionPlanesOverviewCanvas {
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            bottom: 70px;
+            right: 10px;
+            z-index: 200000;
+        }
+    </style>
+</head>
+<body>
+<input type="checkbox" id="info-button"/>
+<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
+<canvas id="myCanvas"></canvas>
+<canvas id="mySectionPlanesOverviewCanvas"></canvas>
+<div class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/section_plane_icon.png"/>
+    <h1>SectionPlanesPlugin</h1>
+    <h2>Slices models open to reveal internal structures</h2>
+    <p>This example demonstrates how to create section planes with touch.</p>
+    <h3>Components used</h3>
+    <ul>
+        <li>
+            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
+               target="_other">Viewer</a>
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
+               target="_other">XKTLoaderPlugin</a>
+
+        </li>
+        <li>
+            <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
+               target="_other">SectionPlanesPlugin</a>
+        </li>
+    </ul>
+    <h3>Resources</h3>
+    <ul>
+        <li>
+            <a href="https://github.com/openBIMstandards/DataSetSchependomlaan"
+               target="_other">Model source</a>
+        </li>
+    </ul>
+</div>
+</body>
+
+<script type="module">
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Import the modules we need for this example
+    //------------------------------------------------------------------------------------------------------------------
+
+    import { PointerCircle, touchPointSelector, Viewer, XKTLoaderPlugin, SectionPlanesPlugin, math } from "../../dist/xeokit-sdk.min.es.js";
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Create a Viewer
+    //------------------------------------------------------------------------------------------------------------------
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas"
+    });
+
+    viewer.camera.eye = [-5.02, 2.22, 15.09];
+    viewer.camera.look = [4.97, 2.79, 9.89];
+    viewer.camera.up = [-0.05, 0.99, 0.02];
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Load a model
+    //------------------------------------------------------------------------------------------------------------------
+
+    const xktLoader = new XKTLoaderPlugin(viewer);
+
+    const sceneModel = xktLoader.load({
+        id: "myModel",
+        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+        edges: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Add a SectionPlanesPlugin - we'll use this to create cross-section planes
+    //------------------------------------------------------------------------------------------------------------------
+
+    const sectionPlanes = new SectionPlanesPlugin(viewer, {
+        overviewCanvasId: "mySectionPlanesOverviewCanvas",
+        overviewVisible: true
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Use the SectionPlanesPlugin to create a section plane wherever we tap on an object
+    //------------------------------------------------------------------------------------------------------------------
+
+    // This creates a function that will attach touch listeners to canvas, and handle tap events
+    const setupTouchSelector = touchPointSelector(
+        viewer,
+        new PointerCircle(viewer), // needed to indicate tap duration to user
+        (orig, dir) => {
+            // find an intersection of a ray from the camera through the scene entities
+            const pickResult = viewer.scene.pick({
+                origin: orig,
+                direction: dir,
+                pickSurface: true
+            });
+            return pickResult;
+        });
+
+    (function setupCreateSectionPlane(id) {
+
+        const createSectionPlane = pickResult => {
+            if (pickResult) {
+                // A section plane is created ...
+                const sectionPlane = sectionPlanes.createSectionPlane({
+                    id: "mySectionPlane" + id,
+                    pos: pickResult.worldPos,
+                    dir: math.mulVec3Scalar(pickResult.worldNormal, -1)
+                });
+                sectionPlanes.showControl(sectionPlane.id);
+            }
+        };
+
+        // ... and touch events are handled through setupTouchSelector callbacks
+        setupTouchSelector(
+            () => null,                               // onCancel do nothing
+            () => null,                               // onChange do nothing
+            (canvasPos, worldPos) => {                // onCommit
+                if (worldPos) {                       // if the point selected by user was on top
+                    createSectionPlane(worldPos);     // of an attachable surface, then create section plane
+                    setupCreateSectionPlane(id + 1);  // and move on to the next one
+                }
+            });
+    })(1); // first `id` to start with
+
+</script>
+</html>
diff --git a/examples/slicing/index.html b/examples/slicing/index.html
@@ -269,6 +269,7 @@
             ["SectionPlanesPlugin_createWithMouse", "Click on the model to create a section plane"],
             ["SectionPlanesPlugin_createWithMouse_dtx", "Click on the model to create a section plane; data textures enabled"],
             ["SectionPlanesPlugin_createWithMouse_photogrammetry", "Click on the model to create a section plane"],
+            ["SectionPlanesPlugin_createWithTouch", "Tap on the model to create a section plane"],
             ["SectionPlanesPlugin_flipSectionPlanes", "Demonstrates ability to globally flip SectionPlane clipping direction"],
 
             "#Slicing objects with face-aligned cutting planes",

diff --git a/src/plugins/SectionPlanesPlugin/Control.js b/src/plugins/SectionPlanesPlugin/Control.js
@@ -132,15 +132,13 @@ class Control {
         });
 
         const handlers = { };
-        const addAxis = (rgb, axisDirection, hoopDirection) => {
+        const addAxis = (rgb, hoopRot) => {
+            const axisDirection = math.mulVec3Scalar(rgb, -1, math.vec3());
             const material = colorMaterial(rgb);
 
-            const rotateToHorizontal = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-            const hoopRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], hoopDirection), math.identityMat4());
-            const hoopMatrix = math.mulMat4(hoopRotation, rotateToHorizontal, math.identityMat4());
-
+            const hoopMatrix = math.quaternionToRotationMat4(hoopRot, math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), hoopMatrix, hoopMatrix);
             const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-
             const scaledArrowMatrix = (t, matR) => {
                 const matT = math.translateMat4v(t, math.identityMat4());
                 const ret = math.identityMat4();
@@ -209,7 +207,8 @@ class Control {
             }), NO_STATE_INHERIT);
 
 
-            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], axisDirection), math.identityMat4());
+            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], rgb), math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), axisRotation, axisRotation);
 
             const translatedAxisMatrix = (yOffset) => math.mulMat4(axisRotation, math.translateMat4c(0, yOffset, 0, math.identityMat4()), math.identityMat4());
             const arrowMatrix = translatedAxisMatrix(arrowLength + .1);
@@ -452,9 +451,9 @@ class Control {
             //
             //----------------------------------------------------------------------------------------------------------
 
-            addAxis([1,0,0], [ 1,  0,  0 ], [ 1, 0,  0 ]),
-            addAxis([0,1,0], [ 0, -1,  0 ], [ 0, 1,  0 ]),
-            addAxis([0,0,1], [ 0,  0, -1 ], [ 0, 0, -1 ])
+            addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
+            addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
+            addAxis([0,0,1], math.identityQuaternion())
         ];
 
         const cleanups = [ ];