Skip to content

Commit

Permalink
Merge pull request #1697 from xeokit/XEOK-50-adjust-overlay-example-f…
Browse files Browse the repository at this point in the history 
…or-tutorial

XEOK-50 Adjust example code for an upcoming 2D Overlay tutorial
  • Loading branch information
@xeolabs
xeolabs authored Oct 16, 2024
2 parents 5440a2d + 48d6bf9 commit 71aa749
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 89 deletions.
53 changes: 53 additions & 0 deletions examples/scenegraph/floorPlan_example.html
View file
Original file line number Diff line number Diff line change
@@ -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>
104 changes: 50 additions & 54 deletions examples/scenegraph/floorPlan_mouseEdit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,78 +51,74 @@ <h3>Resources</h3>
// 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));
};

</script>
</html>
38 changes: 3 additions & 35 deletions examples/scenegraph/overlay.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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;
Expand Down Expand Up @@ -280,4 +249,3 @@ export const setupOverlayAlignmentControl = function(viewer, overlay) {
setStepRotation: v => stepRotation = v
};
};

0 comments on commit 71aa749

Please sign in to comment.