Skip to content

Commit

Permalink
Merge pull request #1742 from paireks/develop/ZonesExamples
Browse files Browse the repository at this point in the history 
[EXAMPLE] Add 2 new cards for 3D zoning and 2D overlay
  • Loading branch information
@xeolabs
xeolabs authored Nov 23, 2024
2 parents 40afb54 + 2a82be7 commit a1327dd
Show file tree
Hide file tree
Showing 9 changed files with 511 additions and 26 deletions.
Binary file added assets/images/2DOverlay.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/3DZoning.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 52 additions & 16 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@ <h2>Viewing Models</h2>

<a href="./buildings" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/holterTower.png" alt="Thumbnail 1">
<img class="card-img-top thumbnail" src="../assets/images/holterTower.png" alt="Buildings Thumbnail">
<div class="card-body">
<h4 class="card-title">Viewing Building Models</h4>
<p class="card-text">Using the xeokit SDK to view building models loaded from IFC, glTF and
Expand All @@ -420,7 +420,7 @@ <h4 class="card-title">Viewing Building Models</h4>

<a href="./cities" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/lyon_city.png" alt="Thumbnail 2">
<img class="card-img-top thumbnail" src="../assets/images/lyon_city.png" alt="Cities Thumbnail">
<div class="card-body">
<h4 class="card-title">Viewing City Models</h4>
<p class="card-text">Using the xeokit SDK to view city models loaded from glTF, CityJSON,
Expand All @@ -437,7 +437,7 @@ <h4 class="card-title">Viewing City Models</h4>
<a href="./lidar" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/mapPointCloud.png"
alt="Thumbnail 3">
alt="LiDAR Thumbnail">
<div class="card-body">
<h4 class="card-title">Viewing LiDAR Scans</h4>
<p class="card-text">Using the xeokit SDK to view LiDAR scans loaded from LAS, LAZ, glTF and
Expand All @@ -455,7 +455,7 @@ <h4 class="card-title">Viewing LiDAR Scans</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="https://github.com/xeokit/xeokit.io/blob/master/img/gear-300x200.gif?raw=true"
alt="Thumbnail 1">
alt="CAD Thumbnail">
<div class="card-body">
<h4 class="card-title">Viewing CAD Models</h4>
<p class="card-text">Using the xeokit SDK to view CAD models loaded from 3DXML, glTF, STL and
Expand All @@ -472,7 +472,7 @@ <h4 class="card-title">Viewing CAD Models</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/treeview.png"
alt="Thumbnail 3">
alt="Navigating Thumbnail">
<div class="card-body">
<h4 class="card-title">Navigating Models</h4>
<p class="card-text">Components for navigating models: TreeView, NavCube, ContextMenu,
Expand All @@ -488,7 +488,7 @@ <h4 class="card-title">Navigating Models</h4>
<a href="./bookmarking" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/BCFViewpointsPlugin.png"
alt="Thumbnail 3">
alt="Bookmarking Thumbnail">
<div class="card-body">
<h4 class="card-title">Bookmarking Model Views</h4>
<p class="card-text">Saving and loading bookmarks, including how to exchange Building
Expand All @@ -505,7 +505,7 @@ <h4 class="card-title">Bookmarking Model Views</h4>
<a href="./snapshots" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/xktWithTextures.png"
alt="Thumbnail 3">
alt="Snapshots Thumbnail">
<div class="card-body">
<h4 class="card-title">Capturing Snapshots</h4>
<p class="card-text">How to capture JPEG and PNG snapshots of a xeokit SDK viewer.</p>
Expand All @@ -520,7 +520,7 @@ <h4 class="card-title">Capturing Snapshots</h4>
<a href="./viewer" class="card-link">
<div class="card">
<img class="card-img-top thumbnail" src="../assets/images/i1n8.png"
alt="Thumbnail 3">
alt="Viewer Thumbnail">
<div class="card-body">
<h4 class="card-title">Customizing the Viewer</h4>
<p class="card-text">Configuring language translations, customizing the loading spinner,
Expand All @@ -539,7 +539,7 @@ <h4 class="card-title">Customizing the Viewer</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/aphs.png"
alt="Thumbnail 3">
alt="Performance Thumbnail">
<div class="card-body">
<h4 class="card-title">Accelerating Performance</h4>
<p class="card-text">How to make the xeokit SDK viewer work at peak performance, using view
Expand All @@ -563,7 +563,7 @@ <h2>Interacting with Objects</h2>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/distanceMeasurements.png"
alt="Thumbnail 1">
alt="Measuring Thumbnail">
<div class="card-body">
<h4 class="card-title">Measuring Objects</h4>
<p class="card-text">Measuring angles and distances on models.</p>
Expand All @@ -579,7 +579,7 @@ <h4 class="card-title">Measuring Objects</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/sectionPlane.png"
alt="Thumbnail 3">
alt="Slicing Thumbnail">
<div class="card-body">
<h4 class="card-title">Slicing Objects</h4>
<p class="card-text">Slicing models with interactive section planes to reveal internal
Expand All @@ -596,7 +596,7 @@ <h4 class="card-title">Slicing Objects</h4>
<a href="./picking" class="card-link">
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/picking.png" alt="Thumbnail 3">
src="../assets/images/picking.png" alt="Picking Thumbnail">
<div class="card-body">
<h4 class="card-title">Picking Objects</h4>
<p class="card-text">How to pick objects in a xeokit Viewer, interactively or
Expand All @@ -613,7 +613,7 @@ <h4 class="card-title">Picking Objects</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="https://github.com/xeokit/xeokit.io/blob/master/img/docs/PerformanceModel/PerformanceModel.png?raw=true"
alt="Thumbnail 2">
alt="Emphasising Thumbnail">
<div class="card-body">
<h4 class="card-title">Emphasising Objects</h4>
<p class="card-text">Changing the appearance of selected objects: colorizing, highlighting
Expand All @@ -631,7 +631,7 @@ <h4 class="card-title">Emphasising Objects</h4>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/annotations.png"
alt="Thumbnail 3">
alt="Labelling Thumbnail">
<div class="card-body">
<h4 class="card-title">Labelling Objects</h4>
<p class="card-text">Pinning fully-customizable HTML labels to the surfaces of model
Expand All @@ -640,8 +640,44 @@ <h4 class="card-title">Labelling Objects</h4>
</div>
</a>
</div>

<!-- Zones -->

<div class="col-md-4 mb-4">
<a href="./zone" class="card-link">
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/3DZoning.png"
alt="Zones Thumbnail">
<div class="card-body">
<h4 class="card-title">3D Zoning</h4>
<p class="card-text">Create 3D zones, measure base, area, volume and assign colours
objects.</p>
</div>
</div>
</a>
</div>

<!-- 2D Overlay -->

<div class="col-md-4 mb-4">
<a href="./overlay" class="card-link">
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/2DOverlay.png"
alt="2D Overlay Thumbnail">
<div class="card-body">
<h4 class="card-title">2D Overlay</h4>
<p class="card-text">Display a 2D overlay (e.g. a floor plan) within the 3D model</p>
</div>
</div>
</a>
</div>

</div>



<br><br>
<h2>Programming Scene Content</h2>
<br>
Expand All @@ -652,7 +688,7 @@ <h2>Programming Scene Content</h2>
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/sceneModelTextured.png"
alt="Thumbnail 2">
alt="Scene Model Thumbnail">
<div class="card-body">
<h4 class="card-title">SceneModel Examples</h4>
<p class="card-text">Low-level programming examples and tests for xeokit's high-performance
Expand All @@ -668,7 +704,7 @@ <h4 class="card-title">SceneModel Examples</h4>
<a href="./scenegraph" class="card-link">
<div class="card">
<img class="card-img-top thumbnail"
src="../assets/images/geometry.png" alt="Thumbnail 2">
src="../assets/images/geometry.png" alt="Scene Graph Thumbnail">
<div class="card-body">
<h4 class="card-title">Scene Graph Examples</h4>
<p class="card-text">Creating custom scene elements using xeokit's scene graph; materials,
Expand Down
0 examples/scenegraph/floorPlan_example.html → examples/overlay/floorPlan_example.html
View file
File renamed without changes.
0 examples/scenegraph/floorPlan_mouseEdit.html → examples/overlay/floorPlan_mouseEdit.html
View file
File renamed without changes.
Loading

0 comments on commit a1327dd

Please sign in to comment.