FaceAlignedSectionPlanesPlugin

FaceAlignedSectionPlanesPlugin is a Viewer plugin that creates and edits face-aligned SectionPlanes.

[Run this example]

Overview

• Use the FaceAlignedSectionPlanesPlugin to create and edit SectionPlanes to slice portions off your models and reveal internal structures.

• As shown in the screen capture above, FaceAlignedSectionPlanesPlugin shows an overview of all your SectionPlanes (on the right, in this example).

• Click a plane in the overview to activate a 3D control with which you can interactively reposition its SectionPlane in the main canvas.
• Configure the plugin with an HTML element that the user can click-and-drag on to reposition the SectionPlane for which the control is active.
• Use BCFViewpointsPlugin to save and load SectionPlanes in BCF viewpoints.

Usage

In the example below, we'll use a GLTFLoaderPlugin to load a model, and a FaceAlignedSectionPlanesPlugin to slice it open with two SectionPlanes. We'll show the overview in the bottom right of the Viewer canvas. Finally, we'll programmatically activate the 3D editing control, so that we can use it to interactively reposition our second SectionPlane.

import {Viewer, GLTFLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "xeokit-sdk.es.js";

// Create a Viewer and arrange its Camera

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [-5.02, 2.22, 15.09];
viewer.camera.look = [4.97, 2.79, 9.89];
viewer.camera.up = [-0.05, 0.99, 0.02];

// Add a GLTFLoaderPlugin

const gltfLoader = new GLTFLoaderPlugin(viewer);

// Add a FaceAlignedSectionPlanesPlugin, with overview visible

const faceAlignedSectionPlanes = new FaceAlignedSectionPlanesPlugin(viewer, {
    overviewCanvasID: "myOverviewCanvas",
    overviewVisible: true,
    controlElementId: "myControlElement", // ID of element to capture drag events that move the SectionPlane
    dragSensitivity: 1  // Sensitivity factor that governs the rate at which dragging moves the SectionPlane
});

// Load a model

const model = gltfLoader.load({
    id: "myModel",
    src: "./models/gltf/schependomlaan/scene.glb"
});

// Create a couple of section planes
// These will be shown in the overview

faceAlignedSectionPlanes.createSectionPlane({
    id: "mySectionPlane",
    pos: [1.04, 1.95, 9.74],
    dir: [1.0, 0.0, 0.0]
});

faceAlignedSectionPlanes.createSectionPlane({
    id: "mySectionPlane2",
    pos: [2.30, 4.46, 14.93],
    dir: [0.0, -0.09, -0.79]
});

// Show the FaceAlignedSectionPlanesPlugin's 3D editing gizmo,
// to interactively reposition one of our SectionPlanes

faceAlignedSectionPlanes.showControl("mySectionPlane2");

const mySectionPlane2 = faceAlignedSectionPlanes.sectionPlanes["mySectionPlane2"];

// Programmatically reposition one of our SectionPlanes
// This also updates its position as shown in the overview gizmo

mySectionPlane2.pos = [11.0, 6.0, -12];
mySectionPlane2.dir = [0.4, 0.0, 0.5];