Need your help！How can I draw a concave body in three-dimensional space? The 3D coordinates of each point on each plane of this concave body are known, but there seems to be no corresponding method to generate it. ConvexGeometry cannot meet the requirements, while ShapePath can only draw concave shapes within a 2D plane.
1 Like
Shapes in threejs can be concave? Can you explain on a higher level, what you’re trying to do? There may be an easier way…
Like “I’m writing a shape editor for editing floorplans”… or smth
1 Like
Thank you very much for your help!!
I am doing a visualization task for block cutting. Each block is composed of multiple planes, and the sequence of points in each plane is known, which may form concave polygons.
I found that ThreeJS only supports the generation of concave polygons in two-dimensional planes and cannot generate concave solid shapes in 3D space.
I have tried two ideas for this:
One is to use the Delaunay triangulation method to segment the block into triangular faces in advance, but no suitable algorithm was found.
The second method is to use ThreeJS’s ConvexGeometry and ClippingPlanes. But when I exported the scene using GLTFExporter, I found that the generated GLTF file cannot save the clipping effect.
Is this concave enough?
Generally, I can think of several options:
- build your 3D object by yourself (triangle by triangle) – you can have any shape in this way
- think whether you can generate the shape out of already supported objects in Three.js – here there is no general solution, because it depends on the shape that you want to build
- use a CSG library (Constructive Solid Geometry) and carve the concave areas in the 3D model
Maybe if you share some samples of a block before and after cutting, it might be possible to give better advice.
2 Likes
Thank you! I am building a tunnel model, such as the following case:
However, due to the need to dig out the middle tunnel, some blocks became concave.
Now I have calculated the positions of each vertex in these blocks. When using ConvexGeometry, a convex hull is generated, resulting in the following situation:
I am currently using ClippingPlanes to remove these excess parts, as shown in the following figure：
However, when exporting using GLTFExporter, it was found that the effect of clippingPlanes was not saved, and the model remained a convex hull.
I don’t know what to do. o(╥﹏╥)o
For something like this… I would either use a csg library, or marching cubes:
GitHub - gkjohnson/three-bvh-csg: A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh — mesh-bvh-csg
GitHub - manthrax/THREE-CSGMesh: Conversion of a CSG library for use with modern THREE.js – a simpler/slower csg library that i maintain…
three.js webgl - marching cubes – an example of marching cubes with some blob spheres.
Here’s the kind of terrains you can generate with marching cubes:
2 Likes
Thank you soooo much!!! I’ll try!
Got interested in manual digging of a tunnel. It is not a perfect solution, because the tunnel walls are not perfectly smooth, and sometimes there a rocks, blocking the tunnel. But it’s just a manual digging, after all, without any heavy CSG machinery.
The code: https://codepen.io/boytchev/full/yLZJjoY (refresh the page if the tunnel is blocked)
3 Likes
Reminds me of a caddisfly 
2 Likes
Thanks for your solution！It helps a lot!
1 Like