CrossSections

Configures cross-section slices for a Scene.

Overview

Cross-sections allow to create an additional colored slice for used clipping planes. It is only a visual effect calculated by shaders. It makes it easier to see the intersection between the model and the clipping plane this way.

Usage

In the example below, we'll configure CrossSections to manipulate the slice representation.

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {PhongMaterial, Viewer, math, SectionPlanesPlugin, XKTLoaderPlugin, Mesh, ReadableGeometry, buildPolylineGeometryFromCurve, SplineCurve} from "../../dist/xeokit-sdk.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
  canvasId: "myCanvas",
  transparent: 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;

//----------------------------------------------------------------------------------------------------------------------
// Create a xeokit loader plugin, load a model, fit to view
//----------------------------------------------------------------------------------------------------------------------

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;

  let path = new SplineCurve(viewer.scene, {
    points: [
      [0, 0, -10],
      [0, 0, -3],
      [10, 0, 10],
      [10, 0, 30],
    ],
  });

  new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
      id: "SplineCurve",
      curve: path,
      divisions: 50,
    })),
    material: new PhongMaterial(viewer.scene, {
      emissive: [1, 0, 0]
    })
  });

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

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

  let currentPoint = path.getPoint(0);
  let currentDirection = path.getTangent(0);

  const sectionPlane = sectionPlanes.createSectionPlane({
    id: "mySectionPlane",
    pos: currentPoint,
    dir: currentDirection
  });

  sectionPlanes.showControl(sectionPlane.id);

  //------------------------------------------------------------------------------------------------------------------
  // Controlling SectionPlane position and direction
  //------------------------------------------------------------------------------------------------------------------

  let currentT = 0.0;
  document.getElementById("section_path").oninput = function() {
    currentT = Number(document.getElementById("section_path").value);
    currentPoint = path.getPoint(currentT);
    currentDirection = path.getTangent(currentT);
    sectionPlane.pos = currentPoint;
    sectionPlane.dir = currentDirection;
  };

  window.viewer = viewer;

  //------------------------------------------------------------------------------------------------------------------
  // Controlling CrossSections settings
  //------------------------------------------------------------------------------------------------------------------

  viewer.scene.crossSections.sliceThickness = 0.05;
  viewer.scene.crossSections.sliceColor = [0.0, 0.0, 0.0, 1.0];
});

[Run this example]