Embed images in section planes and ground planes

[xeolabs]

Introduce a new ImagePlane component, which shows a 3D plane with a bitmap image embedded within it.

ImageMap would be used for

1. showing plan view images within cross-sections, and
2. creating ground planes with embedded plan view or satellite images.

Demo 1: Cross Section with Embedded Image

• [Run this demo]

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
import {SectionPlanesPlugin} from "../src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js";
import {ImagePlane} from "../src/viewer/scene/ImagePlane/ImagePlane.js";

const viewer = new Viewer({
    canvasId: "myCanvas",
    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];

const xktLoader = new XKTLoaderPlugin(viewer);

const sectionPlanes = new SectionPlanesPlugin(viewer, {
    overviewVisible: false
});

model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/schependomlaan/schependomlaan.xkt",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    edges: true,
});

const sectionPlane = sectionPlanes.createSectionPlane({
    id: "mySectionPlane",
    pos: [10.95, 1.95, -10.35],
    dir: [0.0, -1.0, 0.0]
});

const imagePlane = new ImagePlane(viewer.scene, {
    src: "./images/schependomlaanPlanView.png",  // Plan view image
    visible: true,
    gridVisible: true,
    size: 23.95,
    position: sectionPlane.pos,
    dir: sectionPlane.dir,
    collidable: false,
    opacity: 0.75,
    clippable: false // Don't allow ImagePlane to be clipped by the SectionPlane
});

Demo 2: Ground Plane with Embedded Image

• [Run this demo]

 import {Viewer} from "../src/viewer/Viewer.js";
 import {ImagePlane} from "../src/viewer/scene/ImagePlane/ImagePlane.js";
 import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
 
const viewer = new Viewer({
      canvasId: "myCanvas",
      transparent: true
});

viewer.camera.eye = [-8.31, 42.21, 54.30];
viewer.camera.look = [-0.86, 15.40, 14.90];
viewer.camera.up = [0.10, 0.83, -0.54];

const xktLoader = new XKTLoaderPlugin(viewer);

xktLoader.load({             // Load IFC model
     id: "myModel",
     src: "./models/xkt/schependomlaan/schependomlaan.xkt",
     metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
     edges: true,

     rotation: [0, 22, 0],   // Rotate, position and scale the model to align it correctly with the ImagePlane
     position: [-8, 0, 15],
     scale: [1.1, 1.1, 1.1]
});

 new ImagePlane(viewer.scene, {
     src: "./images/schependomlaanGoogleSatMap.png", // Google satellite image
     visible: true,                                  // Show the ImagePlane
     gridVisible: true,                              // Show the grid - grid is only visible when ImagePlane is also visible
     size: 190,                                      // Size of ImagePlane's longest edge
     position: [0, -1, 0],                           // World-space position of ImagePlane's center
     rotation: [0, 0, 0],                            // Euler angles for X, Y and Z
     opacity: 1.0,                                   // Fully opaque
     collidable: false,                              // ImagePlane does not contribute to Scene boundary
     clippable: true                                 // ImagePlane can be clipped by SectionPlanes
});