Set a bounding area to display 3dtileset

CesiumJS
1

Hi all,

I have a 3dtileset which covers a large area, is there a way that I give a bounding area and Cesium will only show the 3dtiles inside that area?

Thanks in advance!

2

Do you mean even if you zoom out to the whole area? Cesium is smart enough to only load tiles that are needed for the current camera view, so you could always set the camera to the bounding you want and then add the tileset, should at least minimize the loading to what you see.

Any particular reason you want to do this? I can really only think of taking your tileset and split it into the smaller tilesets you want to restrict it to, that way you can control the adding and deleting based on camera view and distance.

Cheers,

Alex

3

Hi Alexander,

I want to implement a feature where user give an area and I show only the tiles in that area. I am looking into the clipping plane option in the 3dtileset constructor. Do you have any experience on that matter? It looks like that I can create four clipping plane to form an area, it can make camera only render the tilesets inside that area?

4

Yes, you can certainly look into the clipping option for this, although the loading of the tiles won’t be affected by it in terms of loading. It depends on the reason for the clipping, if it’s performance or loading / bandwidth, or if it’s just a visual thing? There’s even clipping support for the globe that works in a similar manner, where you can clip the globe to the area you’re interested in. Let me know what you’re trying to achieve.

Cheers,

Alex

5

Hi Alexander,

I am just trying to make it visually invisible. Loading all tiles are fine with me. I would really appreciate if you get the time put a small sandcastle or some sample code to demo how to create and add the clipping planes for the tileset. I am currently stuck at this stage. Thank you so much!

6

Hehe, I don’t have that much time on my hands, but the basic clipping demo gives you the basics (also of how to clip different kinds of tilesets/models/etc.);

If you look into the loadModel() function, that’s where the collection of clipping planes are built (only one, in that example), but for example I can create a clipping box like so;

planes: [
  new Cesium.ClippingPlane( new Cesium.Cartesian3(1.0, 0.0, 0.0), size ),
  new Cesium.ClippingPlane( new Cesium.Cartesian3(-1.0, 0.0, 0.0), size ),
  new Cesium.ClippingPlane( new Cesium.Cartesian3(0.0, 1.0, 0.0), size ),
  new Cesium.ClippingPlane( new Cesium.Cartesian3(0.0, -1.0, 0.0), size ),
]

You may have to define four separate clipping planes to define it as an internal clipping collection of planes rather than a square (for example), and play around with the order they are defined in. For more info on this at;

And;

https://cesium.com/learn/cesiumjs/ref-doc/ClippingPlaneCollection.html?classFilter=clipping

Hope any of this gets you started!

Cheers,

Alex

1 Like
7

Fantastic! I will look into those materials. Really appreciate the help and time!