Skip to content

Commit 7869d0f

Browse files
xeolabsxeolabs
authored
Merge pull request #1785 from paireks/develop/AddingSliceWithTouch
[EXAMPLE] Adds example of creating a section plane with a short tap
2 parents 0a549f4 + a49ee59 commit 7869d0f

File tree

2 files changed

+144
-0
lines changed

2 files changed

+144
-0
lines changed

‎examples/slicing/SectionPlanesPlugin_createWithTouch.html

+143
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>xeokit Example</title>
8+
<link href="../css/pageStyle.css" rel="stylesheet"/>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
10+
<style>
11+
#mySectionPlanesOverviewCanvas {
12+
position: absolute;
13+
width: 250px;
14+
height: 250px;
15+
bottom: 70px;
16+
right: 10px;
17+
z-index: 200000;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<input type="checkbox" id="info-button"/>
23+
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
24+
<canvas id="myCanvas"></canvas>
25+
<canvas id="mySectionPlanesOverviewCanvas"></canvas>
26+
<div class="slideout-sidebar">
27+
<img class="info-icon" src="../../assets/images/section_plane_icon.png"/>
28+
<h1>SectionPlanesPlugin</h1>
29+
<h2>Slices models open to reveal internal structures</h2>
30+
<p>This example demonstrates how to create section planes with touch.</p>
31+
<h3>Components used</h3>
32+
<ul>
33+
<li>
34+
<a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
35+
target="_other">Viewer</a>
36+
</li>
37+
<li>
38+
<a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
39+
target="_other">XKTLoaderPlugin</a>
40+
41+
</li>
42+
<li>
43+
<a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
44+
target="_other">SectionPlanesPlugin</a>
45+
</li>
46+
</ul>
47+
<h3>Resources</h3>
48+
<ul>
49+
<li>
50+
<a href="https://github.com/openBIMstandards/DataSetSchependomlaan"
51+
target="_other">Model source</a>
52+
</li>
53+
</ul>
54+
</div>
55+
</body>
56+
57+
<script type="module">
58+
59+
//------------------------------------------------------------------------------------------------------------------
60+
// Import the modules we need for this example
61+
//------------------------------------------------------------------------------------------------------------------
62+
63+
import { PointerCircle, touchPointSelector, Viewer, XKTLoaderPlugin, SectionPlanesPlugin, math } from "../../dist/xeokit-sdk.min.es.js";
64+
65+
//------------------------------------------------------------------------------------------------------------------
66+
// Create a Viewer
67+
//------------------------------------------------------------------------------------------------------------------
68+
69+
const viewer = new Viewer({
70+
canvasId: "myCanvas"
71+
});
72+
73+
viewer.camera.eye = [-5.02, 2.22, 15.09];
74+
viewer.camera.look = [4.97, 2.79, 9.89];
75+
viewer.camera.up = [-0.05, 0.99, 0.02];
76+
77+
//------------------------------------------------------------------------------------------------------------------
78+
// Load a model
79+
//------------------------------------------------------------------------------------------------------------------
80+
81+
const xktLoader = new XKTLoaderPlugin(viewer);
82+
83+
const sceneModel = xktLoader.load({
84+
id: "myModel",
85+
src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
86+
edges: true
87+
});
88+
89+
//------------------------------------------------------------------------------------------------------------------
90+
// Add a SectionPlanesPlugin - we'll use this to create cross-section planes
91+
//------------------------------------------------------------------------------------------------------------------
92+
93+
const sectionPlanes = new SectionPlanesPlugin(viewer, {
94+
overviewCanvasId: "mySectionPlanesOverviewCanvas",
95+
overviewVisible: true
96+
});
97+
98+
//------------------------------------------------------------------------------------------------------------------
99+
// Use the SectionPlanesPlugin to create a section plane wherever we tap on an object
100+
//------------------------------------------------------------------------------------------------------------------
101+
102+
// This creates a function that will attach touch listeners to canvas, and handle tap events
103+
const setupTouchSelector = touchPointSelector(
104+
viewer,
105+
new PointerCircle(viewer), // needed to indicate tap duration to user
106+
(orig, dir) => {
107+
// find an intersection of a ray from the camera through the scene entities
108+
const pickResult = viewer.scene.pick({
109+
origin: orig,
110+
direction: dir,
111+
pickSurface: true
112+
});
113+
return pickResult;
114+
});
115+
116+
(function setupCreateSectionPlane(id) {
117+
118+
const createSectionPlane = pickResult => {
119+
if (pickResult) {
120+
// A section plane is created ...
121+
const sectionPlane = sectionPlanes.createSectionPlane({
122+
id: "mySectionPlane" + id,
123+
pos: pickResult.worldPos,
124+
dir: math.mulVec3Scalar(pickResult.worldNormal, -1)
125+
});
126+
sectionPlanes.showControl(sectionPlane.id);
127+
}
128+
};
129+
130+
// ... and touch events are handled through setupTouchSelector callbacks
131+
setupTouchSelector(
132+
() => null, // onCancel do nothing
133+
() => null, // onChange do nothing
134+
(canvasPos, worldPos) => { // onCommit
135+
if (worldPos) { // if the point selected by user was on top
136+
createSectionPlane(worldPos); // of an attachable surface, then create section plane
137+
setupCreateSectionPlane(id + 1); // and move on to the next one
138+
}
139+
});
140+
})(1); // first `id` to start with
141+
142+
</script>
143+
</html>

‎examples/slicing/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@
269269
["SectionPlanesPlugin_createWithMouse", "Click on the model to create a section plane"],
270270
["SectionPlanesPlugin_createWithMouse_dtx", "Click on the model to create a section plane; data textures enabled"],
271271
["SectionPlanesPlugin_createWithMouse_photogrammetry", "Click on the model to create a section plane"],
272+
["SectionPlanesPlugin_createWithTouch", "Tap on the model to create a section plane"],
272273
["SectionPlanesPlugin_flipSectionPlanes", "Demonstrates ability to globally flip SectionPlane clipping direction"],
273274

274275
"#Slicing objects with face-aligned cutting planes",

0 commit comments

Comments
 (0)