XEOK-50 Add floorPlan_example.html

xeokit · Oct 16, 2024 · 48d6bf9 · 48d6bf9
1 parent e724e3e
commit 48d6bf9
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/examples/scenegraph/floorPlan_example.html b/examples/scenegraph/floorPlan_example.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+  <body style="overflow-y: hidden; overflow-x: hidden; margin: 0; width: 100%; height: 100%;">
+    <canvas id="myCanvas" style="position: absolute; width: 100%; height: 100%; background-image: linear-gradient(lightblue, white);"></canvas>
+  </body>
+  <script type="module">
+
+import { SectionPlanesPlugin, Viewer, XKTLoaderPlugin } from "../../dist/xeokit-sdk.min.es.js";
+
+const viewer = new Viewer({ canvasId: "myCanvas" });
+
+viewer.camera.eye  = [7, 30,  -8];
+viewer.camera.look = [7,  0, -10];
+viewer.camera.up   = [0,  1,   0];
+
+new XKTLoaderPlugin(viewer).load({ src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt" });
+
+new SectionPlanesPlugin(viewer, { overviewVisible: false }).createSectionPlane({ pos: [0, 1, 0], dir: [0, -1, 0] });
+
+import { buildPlaneGeometry, math, Mesh, PhongMaterial, ReadableGeometry, Texture } from "../../dist/xeokit-sdk.min.es.js";
+
+const image = new Image();
+image.src = "../../assets/images/schependomlaanPlanView.png";
+image.onload = function() {
+    // Create the floor plan Texture
+    const scene = viewer.scene;
+    const planTexture = new Texture(scene, { image: image });
+
+    // Create the floor plan Mesh
+    const planMesh = new Mesh(scene, {
+        pickable: false,
+        geometry: new ReadableGeometry(scene, buildPlaneGeometry()),
+        material: new PhongMaterial(scene, {
+            alpha: 0.75,
+            diffuse:  [0, 0, 0],
+            diffuseMap:  planTexture,
+            emissiveMap: planTexture,
+            backfaces: true
+        })
+    });
+
+    // Scale and position the Mesh
+    const planHeight = 0.1
+    const planPosition = [ 10.946, planHeight, -10.343 ];
+    const planScale = 22.66;
+    const t = math.translationMat4v(planPosition);
+    // Preserve image's aspect ratio when scaling
+    const s = math.scalingMat4v([planScale * image.width / image.height, 1, planScale]);
+    planMesh.matrix = math.mulMat4(t, s, math.mat4());
+};
+
+  </script>
+</html>