Add hole to geometry face

Questions
, ,
1

Hi! Faced an interesting situation in the task of creating holes inside graphic objects.

What is the essence - you need to provide the user with a tool for creating a hole inside the geometries of 3D objects.

The Three.js documentation told me how to make holes for 2D objects. For example, planes.

const planePoints = [
    new Vector3(150, 150, 0)
    new Vector3(150, -150, 0)
    new Vector3(-150, -150, 0)
    new Vector3(-150, 150, 0)
]
//creating shape and holes
const shape = new Shape().setFromPoints(planePoints )
const holeVertices = new Path().absellipse(0, 0, 20, 20, 0,  Math.PI * 2);
shape.holes.push(holeVertices)
//Creating mesh
const geometry = new ShapeGeometry(shape)
const material = new MeshBasicMaterial( { color: 0x00ff00 } );
const plane = new Mesh(geometry, material)

In result, I got this. Everything works fine! :smiley:

image
image466×513 4.84 KB

However, this approach does not work for 3D objects. ShapeGeometry allows you to add holes to only one face of geometry. :frowning:

The result I want to achieve. Red circles - show the possible location of the hole.

image
image364×602 11.4 KB

How do I create holes for any geometry face, such as a 3D rectangle? How can you implement?

2

You can probably try this one: three.js examples But the results can vary. Try adjusting the polygon count for the cube.

2 Likes
3

Aside from the above example its hard. You can try joining many hole maker objects as one then perform the boolean.
Or you can do walking vertice face building. There are many many algorithms for mesh face filling. See Blender for example of feature functions.
What youll get are multitude of long tris and these lead to visual problems on the renderer

image
image1176×1144 276 KB

Also if you dont need to change the geometry but just the look of it, you can simply build a masking shader instead with transparency and double sided render

1 Like
4

Thank you for your reply! :smiley:
I saw the CSG library while searching for a solution to the current problem.
However, it is not suitable for the following reasons:

  1. It is very difficult to use it in the business logic of the application. Since you will have to deal with additional generation and combining of several objects on the stage.
  2. I want to get a result in which the user creates holes in an object, specifying only its location, radius and depth (without additional gestures). Therefore, you cannot delegate the process to the user.
5

Thanks for the answer! :beers:
Is there a possibility in Three.js manually triangulate 3D objects?

6

I have done this for implicit surfaces and especially for cylinders and spheres.
Triangulation cylinder with holes
Triangulation sphere with holes
This should be easy to do for a cuboid, as the surface is planar on each side.

However, if you want to insert cylinders into the holes, as with a borehole, it will be a bit more complicated.
It is then similar to the inner geometry.
Inner Geometry (Triangulation)

Example where you can follow the triangulation with the slider: InnerGeometryTHREEi_03

See also
hofk (Klaus Hoffmeister) · GitHub

7

Maybe it is easier in your case to try something similar to these constructions :thinking:

Sphere with up to 6 coordinate planes parallel holes

SphereCutAsWanted