FaceAlignedSectionPlanesPlugin

[xeolabs]

Description

• Released in @xeokit/[email protected]
• Live demo (may take time for build to deply to CDN)

This PR adds the capability to create face-aligned section planes using pointer input. These section planes are easier to use than those created by the existing ScenePlanesPlugin. When we click on an object, this plugin will create a section plane that aligns with the surface that was clicked. Then, using the mouse wheel, or by dragging in an application-supplied DIV, we can move the section plane back and forth along its direction vector. There is no facility for otherwise rotating the section plane, or dragging it along any other axis than its direction vector.

Usage

 import {Viewer, XKTLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer
    //------------------------------------------------------------------------------------------------------------------

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

    viewer.camera.eye = [-3.933, 2.855, 27.018];
    viewer.camera.look = [4.400, 3.724, 8.899];
    viewer.camera.up = [-0.018, 0.999, 0.039];

    //------------------------------------------------------------------------------------------------------------------
    // Add a XKTModelsPlugin - we'll use this to load the model geometry
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    //------------------------------------------------------------------------------------------------------------------
    // Add a FaceAlignedSectionPlanesPlugin - we'll use this to create cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new FaceAlignedSectionPlanesPlugin(viewer, {
        overviewCanvasId: "mySectionPlanesOverviewCanvas",
        controlElementId: "mySectionPlaneControlDiv",
        overviewVisible: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Load the .xkt model and IFC metadata
    //------------------------------------------------------------------------------------------------------------------

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true,
        backfaces: true // Sometimes it's best to show backfaces, so that sliced objects look less odd
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a couple of cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlane = sectionPlanes.createSectionPlane({
        id: "mySectionPlane",
        pos: [1.8933897259414376, 3.8494953147158935, 16.297288643481703],
        dir: [0.007873527603475804, 0.007873527603475804, -0.9999380056414271]
    });

    sectionPlanes.showControl(sectionPlane.id);

[ghost]

👇 Click on the image for a new way to code review

Legend