I have seen many examples of digging a hole in a geometry with depth, but I want to dig a hole in a plane, which is the PlaneGeometry geometry, and restore it after a few seconds (ie fill the hole), sorry , I’m new to three.js, how can I do it.
One solution is to use an alpha map like demonstrated in the following topic:
You can easily remove the alpha map if you want a closed geometry again.
1 Like
Wow, this is a great solution, but why does this alpha map have a lot of aliasing when viewed up close?
By the way, there is another point, my plane geometry is 1000 x 1000, I want to dig a lot of holes through the alpha map, is it feasible?
The alpha map can contain as many holes as you like. The mentioned aliasing is inevitable and unfortunately not handled by MSAA. You can mitigate it by making the material transparent (via transparent: true) but this might have consequences on blending/sorting.
Can I use one alpha map and use multiple textures? I want to randomly generate such holes.
How many holes do you want to have on the plane at once?
Draw as many holes as you want on a canvas and use the canvas with CanvasTexture for alphaMap 
Like fluid simulation then its desappers.
Oh no, the platform I’m using now only allows me to use one Dom element, which is canvas, and no other elements can be used.
Is it not an option to create a new canvas element in the code and not append it to DOM?
3 Likes
It may be that I don’t express it clearly, because the platform I am using can only have one element, that is, HTMLCANVAS.
sorry i don’t understand what you mean
I would give it a try ) To create and use a canvas out of DOM.
Computer Graphics is all about illusion. @Vanter, maybe you can decide whether you need actual holes in the geometry or just to have the users/players think there are holes. If the second option is OK for your case, you can just have images of holes placed over the plane. No need to perforate the plane.
1 Like
Sorry, because I am a person who does not understand English, I may not be able to express my problem clearly, that is, the CreateElement method is unavailable, and it will no longer create new elements.
What I conceive is that the plane geometry is a ground, and there will be a mouse to reveal the head from the ground. If you want to see such a process visually, what I can think of is to dig holes on the plane geometry.
In this example
ProfileSurface
from the Collection of examples from discourse.threejs.org
holes are created by setting the indices to 0. If you remember the original indices, you can close the holes again. In the example, the holes are always a triangle. But of course you can treat whole areas of triangles this way. The example uses a custom base geometry that is similar to the three.js PlaneGeometry.
First solution: renderTarget texture with instanced squares with hole texture. Maybe with bugs.
We have instancedMesh where contains squares with hole texture.
After each click, we add position of click to our instancedMesh.
And each frame we rendering all holes to alphaMap texture.
Each frame we check instanced holes to disapear.
Second solution: renderTarget texture with shader ping-pong technique like into fluid simulation.
At first into shader we make brighter our renderTarget texture each frame to disappear hole.
Then we check mouse click. If clicked, then we rendering hole to our texture.
1 Like
I did some research and found that this can be done, but there is a problem. My PlaneGeometry size is 1000, and the CanvasTexture size is 512. I draw a circle with a size of 0.2 on the CanvasTexture. When I zoom in, I get a polygonal rectangle. If If the width and height of the CanvasTexture are enlarged as a whole, I will get a complete circle, but this will cause my frame rate to drop sharply due to the increase in memory.
Actually, you do not need a texture that big. Here is some green cheese with a texture of only 8x8 pixels1. There is OrbitControls, so you can pan and zoom. Note, that the edges of holes are clear cuts:
https://codepen.io/boytchev/full/zYMZEKd
1 The texture also works with just 1 pixel, but I’m ashamed of using such a small texture
2 Likes