-
Notifications
You must be signed in to change notification settings - Fork 295
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create example with creating section plane with touch
- Loading branch information
Showing
1 changed file
with
143 additions
and
0 deletions.
There are no files selected for viewing
143 changes: 143 additions & 0 deletions
143
examples/slicing/SectionPlanesPlugin_createWithTouch.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |