Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

XEOK-50 Adjust example code for an upcoming 2D Overlay tutorial #1697

Merged
merged 3 commits into from
Oct 16, 2024
Merged

XEOK-50 Adjust example code for an upcoming 2D Overlay tutorial #1697

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6673287
Move createOverlay logic inside floorPlan_mouseEdit.html
MichalDybizbanskiCreoox Sep 27, 2024
e724e3e
XEOK-50 Adjust example code for an upcoming 2D Overlay tutorial
MichalDybizbanskiCreoox Oct 15, 2024
48d6bf9
XEOK-50 Add floorPlan_example.html
MichalDybizbanskiCreoox Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions examples/scenegraph/floorPlan_example.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
};
};

Loading