Multiple clipping

CesiumJS
1

How do I set up multiple clippings to appear immediately after the content is loaded, like the clipping in sandcastle’s Clipping Regions.html?

// I have rewritten the Add a clipping region covering a total lot description in various ways, but it doesn’t work.

How about the following script?

// Create multiple clipping polygons
const polygon1 = new Cesium.ClippingPolygon({
// … Coordinates of polygon1
});

const polygon2 = new Cesium.ClippingPolygon({
// … Coordinates of polygon2
});

// Create each ClippingPolygonCollection
const clippingCollection1 = new Cesium.ClippingPolygonCollection({
polygons: [polygon1])
});

const clippingCollection2 = new Cesium.ClippingPolygonCollection({
polygons: [polygon2] }
});

// Apply to entities (pass multiple ClippingPolygonCollections as an array)
worldTileset.clippingPolygons = [clippingCollection1, clippingCollection2];

2

Hi @sung.sung

You should be able to add multiple polygons to the same ClippingPolygonCollection as shown in the Clipping Regions sandcastle. The collection is not just an array but has specific functions for adding and removing polygons.

worldTileset.clippingPolygons.add(
  new Cesium.ClippingPolygon({
    positions: positions,
  }),
);

If you’re still having issues it may be helpful if you could create and share a minimal Sandcastle example of the code that’s not working as you expect.

3

Hi @jjspace,

My question is not to add clipping later.

My question is,
Just as the A clipping is displayed immediately after sandcastle Clipping Regions.html is displayed, as in the attached image clip.png,
The description is to have the three clippings A, B, and C appear at the same time immediately after the html is displayed.

clip
clip1920×1044 307 KB

4

The following code solved the problem.

// define multiple clipping polygons
const polygon1 = new Cesium.ClippingPolygon({
positions: Cesium.Cartesian3.fromDegreesArray([…]) // coordinates of polygon1
});

const polygon2 = new Cesium.ClippingPolygon({
positions: Cesium.Cartesian3.fromDegreesArray([…])) // coordinates of polygon2
});

// Create ClippingPolygonCollection and add multiple polygons
const clippingCollection = new Cesium.ClippingPolygonCollection({
polygons: [polygon1, polygon2])
});

// Set to 3D Tileset
worldTileset.clippingPolygons = clippingCollection;