Regarding Threejs, using clippingPlans cannot clip the concave parts of the model

I want to create a custom coordinate hole digging feature on the tile I am working on, but I found that if the coordinate is only marked as a convex surface, using clippingPlanes is not a problem. However, if the custom coordinate is concave, there will be a problem. When cutting a concave surface, the convex surface will also be cropped, which is obviously unreasonable. I found some information that said it is possible to make the concave surface into multiple convex surfaces to solve this problem. At that time, I tried it and felt that the effect was not very ideal

Here are the functional images I have created:

These types of things are better done with CSG - it allows to carve object using another object as chisel. If you insist on using clipping planes, you may need to consider their intersection, not union. And of course, the planes must be correctly defined.

Here is a small demo where a rhomboid hole is cut via 5 clipping planes (the 5th is to protect the back side to be cut).

https://codepen.io/boytchev/full/ZYQVEad

image

6 Likes

First of all, thank you for your reply, but there is an unavoidable issue. The coordinates you provided for THREE. Plane are all convex. You can try using a set of coordinates with concave surfaces to reproduce the problem I mentioned

Yes, concave shape will not work as clipping planes are either unioned or intersected – no way to form complex expressions, unless a custom shader is used.

So, the CSG option remains as the most “standard” in this case.

However, you might also consider fake clipping via texture masks (demo: https://codepen.io/boytchev/pen/gOdxbjj).

Or yet another alternative with invisible objects to mimic holes. Here is a demo with a concave shape:

https://codepen.io/boytchev/full/gbPyyYw

image

2 Likes

I understand the solution you mentioned, using a model to set transparency to simulate holes, but the one I made is 3dTileMap. There are still mountains around, so it’s not suitable to use a flat one. I found a case study. I’ll send out the address, can you give me some advice. This is the address: http://mars3d.cn/editor-vue.html?key=ex_2_1_4&id=thing/terrain/terrainUp

Did you try CSG?

Here is what I get with concave shape and mountainous terrain:

4 Likes

I’ve tried it, and but using CSG can damage the structure of the Mesh and Geometry, making it impossible to perform proper LOD subdivision when zooming later, as well as affecting the textures

Three.js’ clipping planes cannot be used to represent concave shapes for clipping. If you’d like to just model a convex shape you can look into using the clipIntersection option on Materials.

As @PavelBoytchev has suggested, if you’re after clipping concave shapes with then CSG is probably the best bet, though including things like walls in the result typically requires water-tight geometry for operating on (which cannot typically be guaranteed in hierarchical LoD data) or a more tailored algorithm that may require more prior knowledge of the geometry LoD structure. If the walls are not required then something like alpha clip textures would work, as well, as has already been mentioned.

A more complex solution would be to write a custom shader that takes a polygon definition uploaded as a data texture and clips the interior.

I’ve tried it, and but using CSG can damage the structure of the Mesh and Geometry, making it impossible to perform proper LOD subdivision when zooming later

If you have separate requirements you’ll have to be more clear about what the issues are.

感谢,你说的这些操作让我受益匪浅,我发的那个案例是使用“cesium”去做的clipping的,但是我查询过文档,cesium也只能进行凸面的clipping,可以给我一个解决方案或者是思路吗

Could you provide a solution or a general approach?

There have already been 4 approaches provided: CSG, alpha clip textures, custom shader, & three.js’ Material.clipIntersection option.

Material.clipIntersection

We use the Three-BVH-CSG library to clip our 3D tiles with any flat concave or convex shapes. Sadly tiles with 3D buildings on them are not always closed and consist of multiple meshes which makes it difficult to generate proper side faces. But it can be done I think.