-
Notifications
You must be signed in to change notification settings - Fork 286
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
XEOK-54 Expose SceneModelEntity's area and volume #1577
Draft
MichalDybizbanskiCreoox
wants to merge
2
commits into
master
Choose a base branch
from
XEOK-54-59-area-volume
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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,222 @@ | ||
<!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> | ||
<script src="../libs/dat.gui.min.js" type="text/javascript"></script> | ||
<link href="../css/dat-gui-light-style.css" rel="stylesheet"/> | ||
<style> | ||
.annotation-marker { | ||
color: #ffffff; | ||
line-height: 1.8; | ||
text-align: center; | ||
font-family: "monospace"; | ||
font-weight: bold; | ||
position: absolute; | ||
min-width: 25px; | ||
height: 25px; | ||
border-radius: 15px; | ||
border: 2px solid #ffffff; | ||
background: black; | ||
visibility: hidden; | ||
box-shadow: 5px 5px 15px 1px #000000; | ||
z-index: 0; | ||
} | ||
|
||
.annotation-label { | ||
position: absolute; | ||
max-width: 250px; | ||
min-height: 50px; | ||
padding: 8px; | ||
padding-left: 12px; | ||
padding-right: 12px; | ||
background: #ffffff; | ||
color: #000000; | ||
-webkit-border-radius: 3px; | ||
-moz-border-radius: 3px; | ||
border-radius: 8px; | ||
border: #ffffff solid 2px; | ||
box-shadow: 5px 5px 15px 1px #000000; | ||
z-index: 90000; | ||
} | ||
|
||
.annotation-label:after { | ||
content: ''; | ||
position: absolute; | ||
border-style: solid; | ||
border-width: 8px 12px 8px 0; | ||
border-color: transparent white; | ||
display: block; | ||
width: 0; | ||
z-index: 1; | ||
margin-top: -11px; | ||
left: -12px; | ||
top: 20px; | ||
} | ||
|
||
.annotation-label:before { | ||
content: ''; | ||
position: absolute; | ||
border-style: solid; | ||
border-width: 9px 13px 9px 0; | ||
border-color: transparent #ffffff; | ||
display: block; | ||
width: 0; | ||
z-index: 0; | ||
margin-top: -12px; | ||
left: -15px; | ||
top: 20px; | ||
} | ||
|
||
.annotation-title { | ||
font: normal 20px arial, serif; | ||
margin-bottom: 8px; | ||
} | ||
|
||
.annotation-desc { | ||
font: normal 14px arial, serif; | ||
} | ||
|
||
</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> | ||
<div id="metrics" style="position: absolute; background: white; border-radius: 5px; padding: 0px 5px; pointer-events: none;"></div> | ||
<div class="slideout-sidebar"> | ||
<h1>ZonesPlugin</h1> | ||
<h2>Creating 3D zones inside a model</h2> | ||
<p>In this example, we're loading a BIM model and create zones inside it</p> | ||
|
||
<h3>Customize</h3> | ||
<div id="myDatGuiContainer"></div> | ||
|
||
<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/buildingSMART/Sample-Test-Files/tree/master/IFC%202x3/Schependomlaan" | ||
target="_other">Model source</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</body> | ||
<script type="module"> | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Import the modules we need for this example | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
import {Viewer, XKTLoaderPlugin, SectionPlanesPlugin} from "../../dist/xeokit-sdk.min.es.js"; | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Create a Viewer | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
const viewer = new Viewer({ | ||
canvasId: "myCanvas", | ||
transparent: true | ||
}); | ||
|
||
viewer.camera.eye = [-9.11, 20.01, 5.13]; | ||
viewer.camera.look = [9.07, 0.77, -9.78]; | ||
viewer.camera.up = [0.47, 0.76, -0.38]; | ||
viewer.camera.perspective.near = 0.1; | ||
viewer.camera.perspective.far = 5000.0; | ||
|
||
viewer.cameraControl.followPointer = true; | ||
|
||
const sao = viewer.scene.sao; | ||
sao.enabled = true; | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Add a XKTModelsPlugin - we'll use this to load the model geometry | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
const xktLoader = new XKTLoaderPlugin(viewer); | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Add a SectionPlanesPlugin - we'll use this to create cross-section planes | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
const sectionPlanes = new SectionPlanesPlugin(viewer, { | ||
overviewVisible: false | ||
}); | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Load the .xkt model and IFC metadata | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
const sceneModel = xktLoader.load({ | ||
id: "myModel", | ||
src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt", | ||
edges: true, | ||
saoEnabled: true | ||
}); | ||
|
||
//------------------------------------------------------------------------------------------------------------------ | ||
// Create a cross-section plane | ||
//------------------------------------------------------------------------------------------------------------------ | ||
|
||
const sectionPlane = sectionPlanes.createSectionPlane({ | ||
id: "mySectionPlane", | ||
pos: [10.95+15, 1.95, -10.35-15], | ||
dir: [0.0, -1.0, 0.0] | ||
}); | ||
|
||
const metricsDiv = document.getElementById("metrics"); | ||
const px = v => v + "px"; | ||
|
||
viewer.scene.input.on("mousemove", (function() { | ||
let highlighted = null; | ||
return function(canvasPos) { | ||
const pickRecord = viewer.scene.pick({ canvasPos: canvasPos }); | ||
const pickEntity = pickRecord && pickRecord.entity && pickRecord.entity.model && pickRecord.entity; | ||
if (highlighted && (highlighted !== pickEntity)) | ||
{ | ||
highlighted.highlighted = false; | ||
highlighted = null; | ||
} | ||
if (pickEntity) | ||
{ | ||
if (! highlighted) | ||
{ | ||
highlighted = pickEntity; | ||
highlighted.highlighted = true; | ||
|
||
try { | ||
metricsDiv.innerHTML = "id: " + pickEntity.id + "<br />area: " + highlighted.area.toFixed(3) + " u²<br />volume: " + highlighted.volume.toFixed(3) + " u³"; | ||
} catch (e) { | ||
metricsDiv.innerHTML = JSON.stringify(e); | ||
console.error(e); | ||
} | ||
} | ||
|
||
metricsDiv.style.left = px(canvasPos[0] + 20); | ||
metricsDiv.style.top = px(canvasPos[1] - 100); | ||
} | ||
|
||
metricsDiv.style.display = highlighted ? "" : "none"; | ||
} | ||
})()); | ||
|
||
</script> | ||
</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
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
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
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Check warning
Code scanning / CodeQL
Inclusion of functionality from an untrusted source Medium