javascriptthree.jsbuffer-geometryparametric-equations

THREE.JS, change default index of buffer geometry, converting a geometry designed for a THREE.PointsMaterial to a THREE.MeshBasicMaterial (or other)

In this code pen,

you'll find a parametric flower that is using a red THREE.MeshBasicMaterial with a wireframe, it looks like this:

enter image description here

with wireframe: false, it looks like this:

enter image description here

Basically, I just want it to be a solid geometry

I tried to set the indices of the buffer geometry manually, but actually setting the indices as defined by this code:

    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 ) );

does nothing, and returns a black screen. So, the default view of the buffergeometry with the indices defined by the position buffer is what appears in the codepen.

Essentially, the problem I'm having is that I can't figure out the proper index to use, and why using any index just returns a black screen.

I looked at other examples from stackoverflow, like

how to understand setindex and index in buffer geometry

and

threejs correct way to setindex indices for buffergeometry

but they basically just described what I'm doing now, which is unhelpful.

The original code for this comes from another stackoverflow article, which is linked to, here, it defines the rose as a parametric equation, but it's based on a THREE.PointsMaterial, and does not work as a solid geometry. So I tried to make it work myself, and this is the result I got and if anyone knows how to fix it please let me know.

I did also decide to make a version of this using a THREE.ParametricGeometry but that method is extremely inefficient for what I want to accomplish, so my road has led me here, generating the points manually and adding them to a buffergeometry is SO much more efficient than using a THREE.ParametricGeometry. If you can help figure out how to properly set the index of the points to appear properly as faces, I would be so grateful because it would solve the problem I'm having of setting the index, so that the flower would appear as a solid geometry.

Solution

  • I figured it out!

    https://codepen.io/ricky1280/pen/mdjOYba?editors=1010

    the 2D loop should look like this:

      for(let r=0; r < v.length; r++){
    // fill(340,100, -20+r*r_D*120)
    for(let theta =0; theta < v[r].length; theta++){
      if(r < v.length-1 && theta< v[r].length-1){
        positions.push(v[r][theta].x*1, v[r][theta].y*1, v[r][theta].z*1);
        positions.push(v[r+1][theta].x*1, v[r+1][theta].y*1, v[r+1][theta].z*1);
        positions.push(v[r+1][theta+1].x*1,v[r+1][theta+1].y*1,v[r+1][theta+1].z*1);
        

        positions.push(v[r][theta].x*1, v[r][theta].y*1, v[r][theta].z*1);
        positions.push(v[r][theta+1].x*1,v[r][theta+1].y*1,v[r][theta+1].z*1);
        positions.push(v[r+1][theta+1].x*1,v[r+1][theta+1].y*1,v[r+1][theta+1].z*1);
        
 
      }
    }
  }

    Generally, instead of adding the positions to the array and then setting an index, add them to the array as if they were being used with respect to an index.

    With this answer in mind the vertices of the p5js geometry should be modified along the same lines.