diff --git a/examples/scenegraph/floorPlan_example.html b/examples/scenegraph/floorPlan_example.html
new file mode 100644
index 0000000000..f5ae3852ba
--- /dev/null
+++ b/examples/scenegraph/floorPlan_example.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
diff --git a/examples/scenegraph/floorPlan_mouseEdit.html b/examples/scenegraph/floorPlan_mouseEdit.html
index 0cfd0ffe9f..d6167dc32b 100644
--- a/examples/scenegraph/floorPlan_mouseEdit.html
+++ b/examples/scenegraph/floorPlan_mouseEdit.html
@@ -51,78 +51,74 @@ Resources
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------
-import { math, SectionPlanesPlugin, Viewer, XKTLoaderPlugin } from "../../dist/xeokit-sdk.min.es.js";
-import { createOverlay, setupOverlayAlignmentControl } from "./overlay.js";
+import { SectionPlanesPlugin, Viewer, XKTLoaderPlugin } from "../../dist/xeokit-sdk.min.es.js";
//------------------------------------------------------------------------------------------------------------------
// Create a Viewer
//------------------------------------------------------------------------------------------------------------------
-const viewer = new Viewer({
- canvasId: "myCanvas",
- transparent: true
-});
+const viewer = new Viewer({ canvasId: "myCanvas" });
-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);
+viewer.camera.eye = [7, 30, -8];
+viewer.camera.look = [7, 0, -10];
+viewer.camera.up = [0, 1, 0];
//------------------------------------------------------------------------------------------------------------------
-// Load the .xkt model and IFC metadata
+// Add a XKTModelsPlugin and load the .xkt model
//------------------------------------------------------------------------------------------------------------------
-const sceneModel = xktLoader.load({
- id: "myModel",
- src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt",
- edges: true,
- saoEnabled: true
-});
+new XKTLoaderPlugin(viewer).load({ src: "../../assets/models/xkt/v8/ifc/Schependomlaan.ifc.xkt" });
//------------------------------------------------------------------------------------------------------------------
-// Add a SectionPlanesPlugin - we'll use this to create cross-section planes
+// Add a SectionPlanesPlugin and create a cross-section plane through the middle of the first floor
//------------------------------------------------------------------------------------------------------------------
-const sectionPlanes = new SectionPlanesPlugin(viewer, {
- overviewVisible: false
-});
+new SectionPlanesPlugin(viewer, { overviewVisible: false }).createSectionPlane({ pos: [0, 1, 0], dir: [0, -1, 0] });
//------------------------------------------------------------------------------------------------------------------
-// Create a cross-section plane
+// Setup the image plane
//------------------------------------------------------------------------------------------------------------------
-const sectionPlane = sectionPlanes.createSectionPlane({
- id: "mySectionPlane",
- pos: [45, 1, -45],
- dir: [0.0, -1.0, 0.0]
-});
-
-const planPath = "../../assets/images/schependomlaanPlanView.png";
-const planAltitude = 0.1;
-const planAspect = 2000 / 1897; // based on the image dimensions
-
-const overlay = createOverlay(viewer.scene, planPath);
-
-const t = math.translationMat4v([ -8, planAltitude, -10.5 ]);
-const s = math.scalingMat4v([10 * planAspect, 1, 10]);
-overlay.matrix = math.mulMat4(t, s, math.mat4());
-
-const overlayCtrl = setupOverlayAlignmentControl(viewer, overlay);
-
-window.document.addEventListener("keydown", e => overlayCtrl.setStepRotation(e.shiftKey));
-window.document.addEventListener("keyup", e => overlayCtrl.setStepRotation(e.shiftKey));
+import { buildPlaneGeometry, math, Mesh, PhongMaterial, ReadableGeometry, Texture } from "../../dist/xeokit-sdk.min.es.js";
+import { setupOverlayAlignmentControl } from "./overlay.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 planHeight = 0.1;
+ const planPosition = [ -4, planHeight, -6 ];
+ const planScale = 10;
+ 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());
+
+ // Use the illustrative alignment control to put the overlay in the desired place
+ const overlayCtrl = setupOverlayAlignmentControl(viewer, planMesh);
+ window.document.addEventListener("keydown", e => overlayCtrl.setStepRotation(e.shiftKey));
+ window.document.addEventListener("keyup", e => overlayCtrl.setStepRotation(e.shiftKey));
+};