ClippingBox Class

This fairly straightforward class essentially creates six cutting planes from the bounding box of a list of nodeids. The result is that only elements inside the bounding box will be visible. While it is of course possible to turn off visibilities of individual elements in HOOPS Communicator this approach allows for quickly “focusing in” on a precise area within a model. This can be particularly useful to limit the view to a “Space” in an IFC model where the individual items within that space are not children of the item in the tree hierarchy and might extend past the defined space.


let myClippingBox = new ClippingBox(hwv);
Creates a new ClippingBox object.

Activates and displays the clipping box from the bounding box of a list of nodeids (in this case the current selection is used)

Hides the clipping box

Adds the standard handles to the clipping box.

The class works well with the ScaleHandles operator from an earlier forum post to interactively change the size of the clipping box. If you intend to utilize the scale handles use the code below to register the ClippingBox class with those handles:

    myScaleHandles.registerEventReceiver(function (nodeid) {

Below is the code for the ClippingBox class. It has no external dependencies except for the relevant HOOPS Web Viewer libraries and the also attached ViewerUtility class. Simply include the js into your project.

It is important to note that this code is not production-ready and provided “as-is”. It is really meant as a starting point for your own development and as an example for some of the functionality and concepts used in HOOPS Communicator.

If you have any questions or comments please don’t hesitate to post them here in the forum.

ClippingBox.js (5.5 KB)
ViewerUtility.js (5.6 KB)