Skip to content

Commit

Permalink
Added example
Browse files Browse the repository at this point in the history
  • Loading branch information
@xeolabs
xeolabs committed Oct 26, 2023
1 parent 2173a1d commit 530a2fd
Showing 1 changed file with 233 additions and 0 deletions.
233 changes: 233 additions & 0 deletions examples/buildings/web-ifc_dtx_Duplex_types.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<!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>

/* ----------------------------------------------------------------------------------------------------------*/
/* NavCubePlugin */
/* ----------------------------------------------------------------------------------------------------------*/

#myNavCubeCanvas {
position: absolute;
width: 250px;
height: 250px;
bottom: 50px;
right: 10px;
z-index: 200000;
}

/* ----------------------------------------------------------------------------------------------------------*/
/* TreeViewPlugin */
/* ----------------------------------------------------------------------------------------------------------*/

#treeViewContainer {
pointer-events: all;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
color: black;
top: 80px;
z-index: 200000;
float: left;
left: 0;
padding-left: 10px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
width: 350px;
}

#treeViewContainer ul {
list-style: none;
padding-left: 1.75em;
pointer-events: none;
}

#treeViewContainer ul li {
position: relative;
width: 500px;
pointer-events: none;
padding-top: 3px;
padding-bottom: 3px;
vertical-align: middle;
}

#treeViewContainer ul li a {
background-color: #eee;
border-radius: 50%;
color: #000;
display: inline-block;
height: 1.5em;
left: -1.5em;
position: absolute;
text-align: center;
text-decoration: none;
width: 1.5em;
pointer-events: all;
}

#treeViewContainer ul li a.plus {
background-color: #ded;
pointer-events: all;
}

#treeViewContainer ul li a.minus {
background-color: #eee;
pointer-events: all;
}

#treeViewContainer ul li a:active {
top: 1px;
pointer-events: all;
}

#treeViewContainer ul li span:hover {
color: white;
cursor: pointer;
background: black;
padding-left: 2px;
pointer-events: all;
}

#treeViewContainer ul li span {
display: inline-block;
width: calc(100% - 50px);
padding-left: 2px;
pointer-events: all;
height: 23px;
}

#treeViewContainer .highlighted-node { /* Appearance of node highlighted with TreeViewPlugin#showNode() */
border: black solid 1px;
background: yellow;
color: black;
padding-left: 1px;
padding-right: 5px;
pointer-events: all;
}

</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="myNavCubeCanvas"></canvas>
<div id="treeViewContainer"></div>
<div class="slideout-sidebar">
<img class="info-icon" src="../../assets/images/bim_icon.png"/>
<h1>WebIFCLoaderPlugin</h1>
<h2>Loading an IFC File</h2>
<p><a href="../../docs/class/src/plugins/WebIFCLoaderPlugin/WebIFCLoaderPlugin.js~WebIFCLoaderPlugin.html"
target="_other">WebIFCLoaderPlugin</a> is the easiest way to load IFC models into a xeokit Viewer.</p>
<p>WebIFCLoaderPlugin loads IFC STEP files and parses them within the browser using <a
href="https://github.com/tomvandig/web-ifc"
target="_other">web-ifc</a>, to create 3D objects within the
Viewer.</p>
<h3>Limitations</h3>
<p>Loading and parsing huge IFC STEP files can be slow, and can overwhelm the browser, however. To view your
largest IFC models, we recommend instead pre-converting those to xeokit's compressed native .XKT format, then
loading them with <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
target="_other">XKTLoaderPlugin</a>.</p>
<h3>Stats</h3>
<ul>
<li>
<div id="time">Loading JavaScript modules...</div>
</li>
</ul>
<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/WebIFCLoaderPlugin/WebIFCLoaderPlugin.js~WebIFCLoaderPlugin.html"
target="_other">WebIFCLoaderPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/TreeViewPlugin/TreeViewPlugin.js~TreeViewPlugin.html"
target="_other">TreeViewPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/NavCubePlugin/NavCubePlugin.js~NavCubePlugin.html"
target="_other">NavCubePlugin</a>
</li>
</ul>
<h3>Resources</h3>
<ul>
<li>
<a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
target="_other">Model source</a>
</li>
</ul>
</div>
</body>

<script type="module">

import {Viewer, WebIFCLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.es.js";

const viewer = new Viewer({
canvasId: "myCanvas",
transparent: true,
dtxEnabled: true // Enable data texture model representation
});

viewer.camera.eye = [-3.933, 2.855, 27.018];
viewer.camera.look = [4.400, 3.724, 8.899];
viewer.camera.up = [-0.018, 0.999, 0.039];

new NavCubePlugin(viewer, {
canvasId: "myNavCubeCanvas",
visible: true,
size: 250,
alignment: "bottomRight",
bottomMargin: 100,
rightMargin: 10
});

new TreeViewPlugin(viewer, {
containerElement: document.getElementById("treeViewContainer"),
autoExpandDepth: 3, // Initially expand the root tree node
hierarchy: "types"
});

const ifcLoader = new WebIFCLoaderPlugin(viewer, {
//wasmPath: "../dist/" // <<------- Path to web-ifc.wasm, which does the IFC parsing for us
wasmPath: "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/"
});

const sceneModel = ifcLoader.load({
id: "myModel",
src: "../../assets/models/ifc/Duplex.ifc",
loadMetadata: true, // Default
excludeTypes: ["IfcSpace"],
edges: true,
dtxEnabled: true
});

sceneModel.on("loaded", ()=>{
viewer.cameraFlight.jumpTo(sceneModel);
});

const t0 = performance.now();
document.getElementById("time").innerHTML = "Loading model...";
sceneModel.on("loaded", function () {
const t1 = performance.now();
document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;
});

</script>
</html>

0 comments on commit 530a2fd

Please sign in to comment.