# Clipping planes problem

**URL:** <https://community.cesium.com/t/clipping-planes-problem/14111>\
**Category:** CesiumJS\
**Created:** [June 17, 2021, 7:29am UTC](https://community.cesium.com/t/clipping-planes-problem/14111 "2021-06-17T07:29:44Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ariel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ariel/32/3458_2.png) [@ariel](https://community.cesium.com/u/ariel)\
**Post date:** [June 17, 2021, 7:29am UTC](https://community.cesium.com/t/clipping-planes-problem/14111/1 "2021-06-17T07:29:44Z")

</div>

I’m having some problems with clipping planes. They have no effect on cesium tiles (exported from agisoft metashape).

Example with cesium tiles from metashape: [https://testkartor.umea.se/3D/test/](https://testkartor.umea.se/3D/test/)

Nothing happens. But if I change the tileset URL to an ion resource. It works perfectly fine. And I can’t figure out why…

Could it be the modelMatrix?  
Cesium.Matrix4.inverse(tileset.root.computedTransform, new Cesium.Matrix4())

Any advice would be greatly appriciated 🙂 thanks!

---

<div class="post-metadata">

**Author:** ![ariel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ariel/32/3458_2.png) [@ariel](https://community.cesium.com/u/ariel)\
**Post date:** [June 28, 2021, 9:24am UTC](https://community.cesium.com/t/clipping-planes-problem/14111/2 "2021-06-28T09:24:14Z")

</div>

This is the code:

```auto
var dig_point = [
    new Cesium.Cartesian3.fromDegrees(20.24418855999141, 63.82015459978235),
    new Cesium.Cartesian3.fromDegrees(20.25139109125409, 63.818916542464265),
    new Cesium.Cartesian3.fromDegrees(20.250973969629612, 63.814013746004946),
    new Cesium.Cartesian3.fromDegrees(20.23750570105997, 63.81444392633881)
];
var clippingPlanes = [];
var pointsLength = dig_point.length;
for (var i = 0; i < pointsLength; ++i) {
    var nextIndex = (i + 1) % pointsLength;
    var midpoint = Cesium.Cartesian3.add(dig_point[i], dig_point[nextIndex], new Cesium.Cartesian3());
    midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);
    var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());
    var right = Cesium.Cartesian3.subtract(dig_point[nextIndex], midpoint, new Cesium.Cartesian3());
    right = Cesium.Cartesian3.normalize(right, right);
    var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());
    normal = Cesium.Cartesian3.normalize(normal, normal);
    if (!false) { normal = Cesium.Cartesian3.multiplyByScalar(normal, -1, normal); }
    var plane = new Cesium.Plane.fromPointNormal(midpoint, normal);
    var clippingPlane = new Cesium.ClippingPlane.fromPlane(plane);
    clippingPlanes.push(clippingPlane);
}
var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: "../Tileset/Stadsmodell/tileset.json",
        maximumScreenSpaceError: 2
    })
);
tileset.readyPromise.then(function () {
    tileset.clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: clippingPlanes,
        modelMatrix: Cesium.Matrix4.inverse(tileset.root.computedTransform, new Cesium.Matrix4())
    });
}).otherwise(function (error) {
    console.log(error);
});

```

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 21, 2021, 3:51pm UTC](https://community.cesium.com/t/clipping-planes-problem/14111/3 "2021-07-21T15:51:47Z")

</div>

Hi @ariel,

Apologies for the delayed response. Is it possible to upload the `tileset.json` that you’re using, so I may experiment with it on my own machine? Alternatively, you can give me the asset ID and I can download it on my own.

Best regards,  
Janine

---

<div class="post-metadata">

**Author:** ![ariel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ariel/32/3458_2.png) [@ariel](https://community.cesium.com/u/ariel)\
**Post date:** [July 22, 2021, 8:33am UTC](https://community.cesium.com/t/clipping-planes-problem/14111/4 "2021-07-22T08:33:43Z")

</div>

Thank you for the reply. With ion resources it works perfectly fine. But when hosting myself (not as an ion resource) as cesium tiles exported from Metashape I can’t make it work.

I don’t have enough storage on ion to upload it. It’s almost 100gb…

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 22, 2021, 2:57pm UTC](https://community.cesium.com/t/clipping-planes-problem/14111/5 "2021-07-22T14:57:42Z")

</div>

Hi @ariel,

When you say you have tried this “with ion resources,” can you confirm that you mean resources that are different from the `tileset.json` you first mentioned?

Best regards,  
Janine

---

<div class="post-metadata">

**Author:** ![ariel](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ariel/32/3458_2.png) [@ariel](https://community.cesium.com/u/ariel)\
**Post date:** [July 22, 2021, 3:31pm UTC](https://community.cesium.com/t/clipping-planes-problem/14111/6 "2021-07-22T15:31:12Z")

</div>

Hi,

[https://testkartor.umea.se/3D/ion-hosted/](https://testkartor.umea.se/3D/ion-hosted/)

Above example has same code but with an resource from ion. Works fine. Problem is when exporting the tileset from Metashape like in this example: [https://testkartor.umea.se/3D/test/](https://testkartor.umea.se/3D/test/)

Sorry for bad explanation.

---

<div class="post-metadata">

**Author:** ![janine](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/janine/32/5135_2.png) [@janine](https://community.cesium.com/u/janine)\
**Post date:** [July 23, 2021, 3:16pm UTC](https://community.cesium.com/t/clipping-planes-problem/14111/7 "2021-07-23T15:16:19Z")

</div>

Hi @ariel,

You’re fine, it’s not a bad explanation! I just needed to clarify some things to narrow down the problem.

The [`ClippingPlaneCollection` documentation](https://cesium.com/learn/cesiumjs/ref-doc/ClippingPlaneCollection.html) specifies some rules for how clipping planes are applied to 3D Tiles:

> For 3D Tiles, the root tile’s transform is used to position the clipping planes. If a transform is not defined, the root tile’s [`Cesium3DTile#boundingSphere`](https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTile.html#boundingSphere) is used instead.

It’s possible the tileset you exported from Metashape doesn’t have a tile transform, though we would have to look at the `tileset.json` to confirm. I would experiment with one clipping plane first and ensure that it is positioned correctly before continuing to add more.

Let me know if I can offer any more support!

Best,  
Janine