If you take a look at this code pen,
You will see a parametric flower created with a red THREE.MeshBasicMaterial and wireframe. When rendered, it looks like this:
https://i.sstatic.net/TP9jP.png
Now, when the wireframe is set to false, the flower appears like this:
https://i.sstatic.net/ay4ew.png
My goal is to make the geometry solid without any grid lines.
I attempted manually setting the indices of the buffer geometry using the following code snippet:
let faces = []
for (var i=0; i<positions.length; i+=3) {
faces.push(i, i+3, i+2)
faces.push(i, i+1, i+3)
}
var indices = new Uint16Array(faces);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
However, despite my efforts, applying these indices just results in a black screen. The default view of the buffergeometry with position-based indices can be seen on the codepen.
The main issue I'm facing is determining the correct index values and understanding why using them leads to a blank screen.
I've researched similar topics on stackoverflow such as:
how to understand setindex and index in buffer geometry
and
threejs correct way to setindex indices for buffergeometry
Unfortunately, these resources only confirm what I'm already attempting, offering no real solution.
The original code is based on a parametric equation for a rose from another stackoverflow post linked here. However, adapting it to use a solid THREE.PointsMaterial proved unsuccessful. My endeavors led me to modify the code myself, but I'm stuck. If anyone knows how to address this issue, please share your expertise.
I also experimented with a version using THREE.ParametricGeometry, but found it highly inefficient for my purposes. Manually generating points and adding them to a buffergeometry has proven to be much more efficient. If you have insights on properly configuring the point indices to display as solid faces, I would greatly appreciate your assistance in resolving this challenge.