Programmatically create front facing faces from an arbitrary array of 8 vertices?

Questions
1

Hello, I might be missing some basics AND trying to do a bit too much here but let’s try. Please point me in the right direction!

I’m working on a simple modeling tool. It’s built in @react-three/fiber but this problem seem like a pure three.js one.

I’m building a custom geometry starting from vertices and indices (both are simple states I control).

Now, I would like to extrude a new face from my starting geometry. I can easily duplicate my vertices and create 4 new ones. But I’m lost when it comes to programmatically creating faces. I want to use indices to reuse my vertices but I’m struggling to create all the front facing faces I need — and in a way that works no matter which direction I extrude from/to.

(btw, I know that three and WebGL work with tris and not quads, but I’m abstracting away the problem by grouping my indices in arrays of 6, representing couples of tris)

extrude

I read that to create faces I should sort my vertices counter-clockwise but I have no idea what exactly it means and how to do it. Any pointers would be appreciated.

2

I found a solution, I’ll write it here in case anyone needs it in the future. It’s not really programmatic but it does work.

What I did is essentially build a lookup table. If you are extruding a face, you can look at the relationship between the new face and previous faces and use that as a baseline to recreate the indices you need for the other missing faces.