Clipping/slicing planes

Clipping planes, also called slicing planes, can be used to "cut through" the model to reveal the interior. This is useful to isolate interesting parts of the model and hide obscuring geometry. Reveal supports having multiple clipping planes in arbitrary position and orientation. When clipping planes are active, the amount of geometry loaded might be reduced since culled geometry doesn't need to be loaded (or rather loaded in a lower detail level). Clipping planes can both be applied to all models (global clipping planes) or to models individually (model clipping planes).

Examples

Single, fixed clipping plane

Global clipping planes are defined by providing zero or more THREE.Plane to Cognite3DViewer.setGlobalClippingPlanes. The clipping planes are activated for all models and replaces any active global clipping planes.

Typically, setFromNormalAndCoplanarPoint is used to create clipping planes. This function accepts a direction that defines the orientation of the plane and a point on the plane. For example, the following code will create a clipping plane that only accepts geometry below Y = 55:

Live Editor

Animated clipping plane

Planes can be manipulated runtime and effects will have an effect in the viewer. Note however that rendering must be triggered after updating the plane before the change will have a visual effect. This can be done using Cognite3DViewer.requestRedraw() or simply set new planes using Cognite3DViewer.setClippingPlanes.

Below is an example animates a clipping plane by ping-ponging the plane in the vertical direction.

Live Editor

note

Updating THREE.Plane-instances will not trigger data loading. To manually trigger data loading after doing substantial changes to the clipping planes, use Cognite3DViewer.setGlobalClippingPlanes. Note that the example above performs substantial changes to the planes without loading data. In a real application it's recommended to not load data during animation, but initiate data after an animation is completed.

Interactable clipping planes

Often it's required to have interactive clipping planes that the user can modify. The following example show how ThreeJS DragControls can be used to manipulate the clipping planes.

After running this snippet the clipping plane can be manipulated by dragging the white manipulator.

Live Editor

Clipping plane for individual models

Clipping planes can also be applied to individual models. To do so, the user may call setModelClippingPlanes on the model object. Model clipping planes can be combined with global clipping planes:

Live Editor

CAD geometry filter

A special type of clipping is to provide a "geometry filter" when loading the model. A geometry filter restricts the area to load geometry for and is specified when the model is created. Geometry filters not only hides clipped geometry, it unloads unnecessary geometry to save memory and improve rendering performance.

const min = new THREE.Vector3(10, 20, 30);
const max = new THREE.Vector3(20, 30, 40);
viewer.addModel({
  modelId,
  revisionId,
  geometryFilter: {
    boundingBox: new THREE.Box3(min, max)
  }
});

note

Geometry filters are static and cannot be changed after creating the model. Instead, remove and re-add the model, or use regular clipping planes if they change frequently.