How can I calculate area?

Questions
, , , ,
1

Hi, I’m quite new to Three.js and React Three Fiber. I’m doing a project that involves two models, cutting through those models with a cutplane, creating caps and then finding the total area of the cap. While this isn’t mine, my project is similar to this one I found:

The only thing is, I’m not sure how to find the area of the cap, ie all the pink… Some strategies I thought of:

  • Getting all the edges, creating a shape from it then calculating area using ShapeUtils (although not sure if R3F has ShapeUtils?)
  • Using a for loop to go through all the vertices and creating multiple Triangles

I would also like to know if I can “scan” through a certain depth and see which cap has the highest area.

Would love a bit more direction on how I can achieve this!

Thanks.

2

it sounds more like a math/topology problem. r3f is probably not related, if threejs has shapeUtils then you can of course use them in your project.

is there a reason you need that data? or do you only want to create these caps and that’s that, because this would be pretty easy using CSG:

1 Like
3

Yeah unfortunately finding the area of the caps is a pretty important part of my project.

So if it’s not possible to do in R3F, what could I use instead? Is it possible to use R3F for the frontend display and connect it to some sort of backend where these calculations occur?

Also, though I seemingly won’t be about to use it, out of curiosity how would you implement the MathUtils functions in R3F? I couldn’t find the documentation for it.

Thanks for the speedy reply!

4

everything that’s possible in three is possible in fiber, r3f is threejs. mathutils is available to you just like everything else is. you don’t need any extra documentation, threes own documentation is enough, if it lists a function that you need, just use it.

import { MathUtils } from 'three'

...
MathUtils.setQuaternionFromProperEuler(..........)

it’s just that i don’t think you’ll get the attention this probably needs, because it’s inherently a math/threejs problem. people not familiar with react will ignore it. i wish i could help but lack the ability to understand deeper math.

5

All good then, at least I know that I’ll need to investigate a bit outside of what R3F has to offer, which is better than hoping that the answer is in there somewhere. Thanks!

6

Area of a triangle can be found as:

new THREE.Vector3().crossVectors(
 new THREE.Vector3().subVectors( vertexB, vertexA ),
 new THREE.Vector3().subVectors( vertexC, vertexA ),
).length() / 2

If you have the cap itself as a single geometry, you can compute the area for each triangle within it, and add them together. To extract the triangles, you may have to use the geometry.index array to identify which vertices form the triangles of the cap. If there is no geometry.index present, then the triangle vertices will be laid out sequentially in the attributes.position.array, in x0,y0,z0, x1,y1,z1, x2,y2,z2 … form.

1 Like
7

If the .index is present… then the geometry.index.array will contain integers indicating the offset of each triangles vertices within the geometry.attributes.position array…
so indices like 0,1,2 will indicate the vertices stored at offsets 0 ,3, and 6 in the position array. (the indices need to be multiplied by 3 to find their positions in the position array.)

1 Like