Added LiDAR example

xeokit · Feb 26, 2024 · 5a32695 · 5a32695
1 parent d0e6af9
commit 5a32695
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 2 deletions.
diff --git a/assets/models/gltf/GLBSample/public-use-sample-apartment.glb b/assets/models/gltf/GLBSample/public-use-sample-apartment.glb
diff --git a/examples/lidar/glb_ElevatorDoorway.html b/examples/lidar/glb_ElevatorDoorway.html
@@ -0,0 +1,72 @@
+<!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>
+</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 class="slideout-sidebar">
+    <img class="info-icon" src="../../assets/images/gltf_logo.png"/>
+    <h1>GLTFLoaderPlugin</h1>
+    <p>Loading a glTF roadworks scan captured on iPhone 12 Pro with <a href="https://scaniverse.com/">Scaniverse</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/GLTFLoaderPlugin/GLTFLoaderPlugin.js~GLTFLoaderPlugin.html"
+               target="_other">GLTFLoaderPlugin</a>
+        </li>
+    </ul>
+    <h3>Resources</h3>
+    <ul>
+        <li>
+            <a href="https://github.com/xeokit/xeokit-sdk/issues/1313"
+               target="_other">Model source</a>
+        </li>
+    </ul>
+</div>
+</body>
+<script type="module">
+
+    import {Viewer, GLTFLoaderPlugin, ReflectionMap, FastNavPlugin, sRGBEncoding} from "../../dist/xeokit-sdk.min.es.js";
+
+    const viewer = new Viewer({
+        canvasId: "myCanvas",
+        transparent: true,
+        colorTextureEnabled: true
+    });
+
+    viewer.camera.eye = [-0.5607302486267173, 0.04290712593203087, 4.190729930006354];
+    viewer.camera.look = [0.7052946670565493, -0.18264935499372642, -0.14314878939648068];
+    viewer.camera.up = [-0.0017317831936537432, 0.9986499061608406, -0.05191691296595461];
+
+    viewer.scene.gammaInput = true;
+    viewer.scene.gammaOutput = true;
+    viewer.scene.gammaFactor = 2.4;
+
+    const gltfLoader = new GLTFLoaderPlugin(viewer);
+
+    const sceneModel = gltfLoader.load({
+        id: "myHousePlan",
+        src: "../../assets/models/gltf/GLBSample/public-use-sample-apartment.glb"
+    });
+
+</script>
+</html>
diff --git a/examples/lidar/index.html b/examples/lidar/index.html
@@ -264,8 +264,9 @@
 
         "GLB": [
             "#Loaded from GLB",
-            ["glb_SkatePark", "Skate park LiDAR triagulated point cloud scan loaded from GLB"],
-            ["glb_Roadworks", "Roadworks LiDAR triagulated point cloud scan loaded from GLB"]
+            ["glb_ElevatorDoorway", "Doorway LiDAR triangulated point cloud scan loaded from GLB"],
+            ["glb_SkatePark", "Skate park LiDAR triangulated point cloud scan loaded from GLB"],
+            ["glb_Roadworks", "Roadworks LiDAR triangulated point cloud scan loaded from GLB"]
         ],
 
         "LAZ": [