SectionCaps

Implements hatching for Solid objects on a Scene.

[Run this example]

##Overview

The WebGL implementation for capping sliced 3D objects works by first calculating intersection segments where a cutting plane meets the object's edges. These segments form a contour that is triangulated using the Earcut algorithm, which handles any internal holes efficiently. The resulting triangulated cap is then integrated into the original mesh with appropriate normals and UVs.

##Usage

In the example, we'll start by enabling readable geometry on the viewer.

Then we'll position the camera, and configure the near and far perspective and orthographic clipping planes. Finally, we'll use XKTLoaderPlugin to load the Duplex model.

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

viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];

const cameraControl = viewer.cameraControl;
cameraControl.navMode = "orbit";
cameraControl.followPointer = true;

const xktLoader = new XKTLoaderPlugin(viewer);

var t0 = performance.now();

document.getElementById("time").innerHTML = "Loading model...";

const sceneModel = xktLoader.load({
    id: "myModel",
    src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
    edges: true
});

sceneModel.on("loaded", () => {

    var t1 = performance.now();
    document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;

    //------------------------------------------------------------------------------------------------------------------
    // Add caps materials to all objects inside the loaded model that have an opacity equal to or above 0.7
    //------------------------------------------------------------------------------------------------------------------        
    const opacityThreshold = 0.7;
    const material = new PhongMaterial(viewer.scene,{
        diffuse: [1.0, 0.0, 0.0],
        backfaces: true
    });
    addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material);

    //------------------------------------------------------------------------------------------------------------------
    // Create a moving SectionPlane, that moves through the table models
    //------------------------------------------------------------------------------------------------------------------

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

    const sectionPlane = sectionPlanes.createSectionPlane({
        id: "mySectionPlane",
        pos: [0.5, 2.5, 5.0],
        dir: math.normalizeVec3([1.0, 0.01, 1])
    });

    sectionPlanes.showControl(sectionPlane.id);

    window.viewer = viewer;

});

function addCapsMaterialsToAllObjects(sceneModel, opacityThreshold, material) {
    const allObjects = sceneModel.objects;
    for(const key in allObjects){
        const object = allObjects[key];
        if(object.opacity >= opacityThreshold)
            object.capMaterial = material;
    }
}