Please help: How to properly index THREE.BufferGeometry faces & moving generated geometry from p5.js to THREE.js (because THREE is amazing)

Hi there!

I’ve been working for hours on this problem and I’ve gotten to a few places, but what it all boils down to is that I don’t know how to properly index the faces on a THREE.BufferGeometry relative to a series of vertices generated by a parametric equation.

I am moving from a 3D geometry generated by p5.js to a geometry generated by THREE.js, but in the end that doesn’t really matter, since the vertices are the same in both places. I just can’t figure out how to properly index the faces.

What I want to happen is this - this is in p5

but what actually happens is this - this is in THREE (and isn’t that far off actually!)

This is a more simple problem to solve, and generally you can see where the vertices are and that they’re being properly generated and are in the right place but I can’t figure out how to draw the faces the right way, it’s just barely out of my reach to solve.

A more advanced problem to solve for the totally boss people on this forum is the spherical version of this problem.

what I want here

what actually happens here (why is the output totally different when the equation is the same??? :worried:)

I finally decided to ask everyone about this because I just cannot figure it out. If you know how to solve this, and if you’re good at parametric equations and indexing faces properly, please please help!

Also: I know this can be done using a THREE.ParametricGeometry but I do not want to use that route because this one is significantly more performant and performance is very important

I don’t know p5, but I noticed that always 5 vertex belong together.

Is there something like wireframe for the material in p5? Then you can possibly see what happens. Maybe a center is formed internally to render triangles?