Subtracting Geometry in Three.js (or really, 3D programming in general)

吃可爱长大的小学妹 提交于 2021-01-29 06:50:22

问题


I'm currently working on a small project with which I need to subtract a rectangular area of a cube on mousemove (think, an indented area for placing a door on a house). The 'door' would be 'placed' on click, but would need to be 'visualized' while the user is deciding its location; in reality, nothing changes except the fact that the user is no longer moving it around.

The issue here is finding an efficient way of allowing a user to move the door around, while it interacts and modifies the house mesh. I've been toying with CSG for Three.js, but I'm thinking that there might be a better algorithm for my use case. I feel it would be really costly to remove the cube from the scene, convert it to a CSG mesh, subtract, then convert back to a mesh and add it back into the scene on every frame until the user decides its location.

Is CSG the wrong approach here? Should I modify the vertices directly? If so, how would I go about calculating/adding the vertices needed to create an 'indention' in the square? Really, I'm looking for what game and 3D application programmers consider best practice for handling a case like this. How does an application like SketchUp handle things like pushing/pulling geometry?

Thanks.


回答1:


Personally I think that CSG is best for polygon-soup kind of geometry, where you don't have much of knowledge about your mesh and its topology. CSG uses quite heavy computations and should fit almost all tasks you may have but it may also give you some problems, like the lack of symmetry or some precision issues.

On the other hand your geometry is very simple and you want to create it on the fly so there's not much sense creating two simple cubes and running heavy CSG over those.

If I had similar task I'd just create this geometry by hand, it's very simple:

First, start of a simple 2D shape, not 3D geometry and imagine you divide your wall into 3 parts - left of the doors, right of the doors, above the doors. You may notice you get just 3 rectangles, with positions and sizes depending on the positions and sizes of your wall and the doors. This gives you just 6 triangles which are basically the front of your wall. Now you add 6 similar triangles at some small distance (but remember to mirror their normals) and you have a second side of your wall. You need also 8 narrow rectangles to connect both sides of the geometry and you're done.

I don't give you any specific equations because it's really basic math, like + and - but if you still have problem I may help you further. I think you may have more problems with actual mesh data, like vertex indices, etc. but it's a great exercise, to learn about mesh internals.

BTW: It could be better for you to split the wall into 5 parts, instead of 3, it would give you a bit nicer mesh but I don't want to overcomplicate it for now.

BTW 2: You may also extend this solution to use more doors/windows in future, but let's stick to your question for now :).



来源:https://stackoverflow.com/questions/31543488/subtracting-geometry-in-three-js-or-really-3d-programming-in-general

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!