I would like to cut through a model with a plane and get a resultant outline of the model where the plane slices through it. For example if I use a plane to slice the corner off of a cube I expect to see a line in the shape of a triangle.
How do I do this in Three.js ? I am used to doing this in tools that provide access to the points, triangles and triangle edges. However, I do not know yet how to do this correctly in Three.js. I’m hoping someone can point me in the right direction(or tell me it can’t be done). It appears that in Three.js they really don’t want you to have access to basic mesh elements. Or I’m looking in all the wrong places.
I’m hoping there is a way to walk through the triangles such that I can walk from one triangle to the next adjacent triangle depending on the line segment. Unless there is an easier way.
I think what you’re looking for is called “clippping”, and there are a few demos of this in the examples section. This doesn’t provide the outline you require, though, since the clipping is calculated in the shaders, so you don’t really have access to the points or vertices on the JavaScript side. You might get the edge as a post-process pass with this effect created by Omar.
If you need the outline as points or a separate geometry object, then it might require more complex math calculations.
I appreciate the help. I’ll take a look and see how it fits my needs. On the surface it appears that Three.js is a graphics tool with some geometric calculation abilities but not a full-throated ability. I don’t mean that as a knock, just that it may be a screwdriver and I really need a hammer. Thus I’ve picked up (handed to me actually) the wrong tool for the job I need done. What I need is a computational geometry tool and when I’m done with that … display of the results with some interactivity. That is my current impression.
If you really just want a visual outline of where the model was trimmed you can use the Material.clippingPlanes field as @marquizzo suggested and then write a custom shader to highlight the edge that was clipped by computing the distance to the clip plane at every fragment.
But yes generally three.js is not designed to support complex geometry manipulation like clipping. I’d argue javascript is probably not the best place to be doing that kind of operation though it is possible. If you need a series of segments representing where the geometry has intersected a plane you can iterate over the triangles in the three.js geometry and compute the intersections of triangles with the plane to get those segments.
Thx. I would like to get the cross-section of the 3D model I have so that a parametric 3D model can be reconstructed and used for engineering analysis. It sounds duplicative but what gets built often varies from the design. Or sometimes you have something that was built before the era of 3D models so none exists. The visual outline is just the start of my wants. I want a lot of things.
Your tip on iterating over triangles in the three.js geometry is where I was trying to go, but finding it hard to get to the triangles. I have meshes of many triangles so iterating randomly would be painful. This is where CG usually provides some coherence to the iteration. But that is Step 2. I’m still at Step 1: get the actual triangles of a mesh.
I’m new to three.js so I’m still figuring out what is what. My comfort zone is creating the CG libraries/capabilities. hofk posted some links that might help but if you have suggestions as well, I’m listening.
You need:
1- GUI to transform the plane.
2- A fast and efficient way to get intersection of line-segments and a bounded-plane.
3- Algorithm to group these point together
4- Export the geometry of outline.
