From 6673287d918734e777618eef4cf2995a3f27de60 Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Fri, 27 Sep 2024 16:55:15 +0200 Subject: [PATCH 1/3] Move createOverlay logic inside floorPlan_mouseEdit.html --- examples/scenegraph/floorPlan_mouseEdit.html | 92 ++++++++++---------- examples/scenegraph/overlay.js | 38 +------- 2 files changed, 47 insertions(+), 83 deletions(-) diff --git a/examples/scenegraph/floorPlan_mouseEdit.html b/examples/scenegraph/floorPlan_mouseEdit.html index 0cfd0ffe9f..8335bb2de0 100644 --- a/examples/scenegraph/floorPlan_mouseEdit.html +++ b/examples/scenegraph/floorPlan_mouseEdit.html @@ -51,8 +51,8 @@

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 { math, SectionPlanesPlugin, Viewer, XKTLoaderPlugin, Mesh, PhongMaterial, ReadableGeometry, Texture, buildPlaneGeometry } from "../../dist/xeokit-sdk.min.es.js"; +import { setupOverlayAlignmentControl } from "./overlay.js"; //------------------------------------------------------------------------------------------------------------------ // Create a Viewer @@ -63,66 +63,62 @@

Resources

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.camera.eye = [7, 30, -8]; +viewer.camera.look = [7, 0, -10]; +viewer.camera.up = [0, 1, 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 +// Add a XKTModelsPlugin and load the .xkt model //------------------------------------------------------------------------------------------------------------------ -const xktLoader = new XKTLoaderPlugin(viewer); - -//------------------------------------------------------------------------------------------------------------------ -// 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 -}); +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)); +const image = new Image(); +image.src = "../../assets/images/schependomlaanPlanView.png"; +image.onload = function() { + const planAltitude = 0.1; + const planAspect = image.width / image.height; // based on the image dimensions + const planScale = 10; + + const scene = viewer.scene; + const planTex = new Texture(scene, { image: image }); + + const overlayMesh = new Mesh(scene, { + pickable: false, + geometry: new ReadableGeometry(scene, buildPlaneGeometry()), + material: new PhongMaterial(scene, { + alpha: 0.75, + diffuse: [0, 0, 0], + diffuseMap: planTex, + emissiveMap: planTex, + backfaces: true + }) + }); + + const t = math.translationMat4v([ -4, planAltitude, -6 ]); + const s = math.scalingMat4v([planScale * image.width / image.height, 1, planScale]); + overlayMesh.matrix = math.mulMat4(t, s, math.mat4()); + + // Use the illustrative alignment control to put the overlay in the desired place + + const overlayCtrl = setupOverlayAlignmentControl(viewer, overlayMesh); + window.document.addEventListener("keydown", e => overlayCtrl.setStepRotation(e.shiftKey)); + window.document.addEventListener("keyup", e => overlayCtrl.setStepRotation(e.shiftKey)); +}; diff --git a/examples/scenegraph/overlay.js b/examples/scenegraph/overlay.js index 6af1051011..f1a70050be 100644 --- a/examples/scenegraph/overlay.js +++ b/examples/scenegraph/overlay.js @@ -1,4 +1,6 @@ -import { math, Mesh, PhongMaterial, ReadableGeometry, Texture } from "../../dist/xeokit-sdk.min.es.js"; +import {Marker, math} from "../../dist/xeokit-sdk.min.es.js"; +import {Dot} from "../../src/plugins/lib/html/Dot.js"; + const planeIntersect = function(p0, n, origin, direction) { const t = - (math.dotVec3(origin, n) - p0) / math.dotVec3(direction, n); @@ -22,39 +24,6 @@ const transformToNode = function(from, to, vec) { vec[1] += fromRec.top - toRec.top; }; -import {Marker} from "../../src/viewer/scene/marker/Marker.js"; -import {Dot} from "../../src/plugins/lib/html/Dot.js"; - -export const createOverlay = function(scene, src) { - const tex = new Texture(scene, { src: src }); - - const [ xmin, ymin, zmin, xmax, ymax, zmax ] = [ 0, 0, 0, 1, 0, 1 ]; - const positions = [ xmin, ymax, zmax, xmax, ymax, zmax, xmax, ymax, zmin, xmin, ymax, zmin ]; - const indices = [ 0, 1, 2, 0, 2, 3 ]; - - return new Mesh(scene, { - pickable: false, - geometry: new ReadableGeometry( - scene, - { - positions: positions, - indices: indices, - normals: math.buildNormals(positions, indices), - uv: [ 0, 1, 1, 1, 1, 0, 0, 0 ] - }), - material: new PhongMaterial(scene, { - alpha: 0.75, - diffuse: [0, 0, 0], - ambient: [0, 0, 0], - specular: [0, 0, 0], - diffuseMap: tex, - emissiveMap: tex, - backfaces: true - }) - }); -}; - - export const setupOverlayAlignmentControl = function(viewer, overlay) { const scene = viewer.scene; @@ -280,4 +249,3 @@ export const setupOverlayAlignmentControl = function(viewer, overlay) { setStepRotation: v => stepRotation = v }; }; - From e724e3eac2187111f9ffffac6f162108e6a260ed Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Tue, 15 Oct 2024 17:38:43 +0200 Subject: [PATCH 2/3] XEOK-50 Adjust example code for an upcoming 2D Overlay tutorial --- examples/scenegraph/floorPlan_mouseEdit.html | 46 ++++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/examples/scenegraph/floorPlan_mouseEdit.html b/examples/scenegraph/floorPlan_mouseEdit.html index 8335bb2de0..d6167dc32b 100644 --- a/examples/scenegraph/floorPlan_mouseEdit.html +++ b/examples/scenegraph/floorPlan_mouseEdit.html @@ -51,22 +51,17 @@

Resources

// Import the modules we need for this example //------------------------------------------------------------------------------------------------------------------ -import { math, SectionPlanesPlugin, Viewer, XKTLoaderPlugin, Mesh, PhongMaterial, ReadableGeometry, Texture, buildPlaneGeometry } from "../../dist/xeokit-sdk.min.es.js"; -import { 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 = [7, 30, -8]; viewer.camera.look = [7, 0, -10]; viewer.camera.up = [0, 1, 0]; -viewer.cameraControl.followPointer = true; //------------------------------------------------------------------------------------------------------------------ // Add a XKTModelsPlugin and load the .xkt model @@ -78,44 +73,49 @@

Resources

// Add a SectionPlanesPlugin and create a cross-section plane through the middle of the first floor //------------------------------------------------------------------------------------------------------------------ -new SectionPlanesPlugin(viewer, { overviewVisible: false }).createSectionPlane({ - pos: [0, 1, 0], - dir: [0, -1, 0] -}); +new SectionPlanesPlugin(viewer, { overviewVisible: false }).createSectionPlane({ pos: [0, 1, 0], dir: [0, -1, 0] }); //------------------------------------------------------------------------------------------------------------------ // Setup the image plane //------------------------------------------------------------------------------------------------------------------ +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() { - const planAltitude = 0.1; - const planAspect = image.width / image.height; // based on the image dimensions - const planScale = 10; - + // Create the floor plan Texture const scene = viewer.scene; - const planTex = new Texture(scene, { image: image }); + const planTexture = new Texture(scene, { image: image }); - const overlayMesh = new Mesh(scene, { + // 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: planTex, - emissiveMap: planTex, + diffuseMap: planTexture, + emissiveMap: planTexture, backfaces: true }) }); - const t = math.translationMat4v([ -4, planAltitude, -6 ]); + // 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]); - overlayMesh.matrix = math.mulMat4(t, s, math.mat4()); + 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, overlayMesh); + const overlayCtrl = setupOverlayAlignmentControl(viewer, planMesh); window.document.addEventListener("keydown", e => overlayCtrl.setStepRotation(e.shiftKey)); window.document.addEventListener("keyup", e => overlayCtrl.setStepRotation(e.shiftKey)); }; From 48d6bf99258ed86b43ed6ada8be60c768a3ba754 Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Wed, 16 Oct 2024 10:17:09 +0200 Subject: [PATCH 3/3] XEOK-50 Add floorPlan_example.html --- examples/scenegraph/floorPlan_example.html | 53 ++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 examples/scenegraph/floorPlan_example.html 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 @@ + + + + + + +