SectionPlanesPlugin

SectionPlanesPlugin is a Viewer plugin that manages SectionPlanes.

[Run this example]

Overview

• Use the SectionPlanesPlugin to create and edit SectionPlanes to slice portions off your models and reveal internal structures.
• As shown in the screen capture above, SectionPlanesPlugin 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.
• Use {@lin 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 SectionPlanesPlugin 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, SectionPlanesPlugin} 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 SectionPlanesPlugin, with overview visible

const sectionPlanes = new SectionPlanesPlugin(viewer, {
    overviewCanvasID: "myOverviewCanvas",
    overviewVisible: true
});

// Load a model

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

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

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

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

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

sectionPlanes.showControl("mySectionPlane2");

const mySectionPlane2 = sectionPlanes.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];