A plane-shaped 3D object containing a bitmap image.

Use ImagePlane to embed bitmap images in your scenes.

As shown in the examples below, ImagePlane is useful for creating ground planes from satellite maps and embedding 2D plan view images in cross-section slicing planes.

Example 1: Create a ground plane from a satellite image

In our first example, we'll load the Schependomlaan model, then use an ImagePlane to create a ground plane, which will contain a satellite image sourced from Google Maps.

[Run this example]

import {Viewer, ImagePlane, XKTLoaderPlugin} from "xeokit-sdk.es.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.xkt",
     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/schependomlaanSatMap.png",       // Google satellite image; accepted file types are PNG and JPEG
     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
     pickable: true                                  // Allow the ground plane to be picked
});

Example 2: Embed an image in a cross-section plane

In our second example, we'll load the Schependomlaan model again, then slice it in half with a SectionPlanesPlugin, then use an ImagePlane to embed a 2D plan view image in the slicing plane.

[Run this example]

import {Viewer, XKTLoaderPlugin, SectionPlanesPlugin, ImagePlane} from "xeokit-sdk.es.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; accepted file types are PNG and JPEG
    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
    pickable: false                              // Don't allow ImagePlane to be picked
 });