How to extrude from 2D points with BufferGeometry?

Questions
1

I used the function below to create custom geometry from 2D points.

/**
 * Code from: https://stackoverflow.com/a/29969348
 * @param points
 * @param depth
 * @returns {PlaneGeometry}
 */
extrudePath(points, depth) {
    const geometry = new THREE.PlaneGeometry(0, 0, points.length - 1, 1);
    const vertices = geometry.vertices;

    for (let i = 0, l = points.length, p; i < l; i++) {
        p = points[i];
        vertices[i].x = vertices[i + l].x = p[0];
        vertices[i].y = vertices[i + l].y = p[1];
        vertices[i].z = p[2];
        vertices[i + l].z = p[2] + depth;
    }

    geometry.computeFaceNormals();
    return geometry;
}

Plain and simple, and much needed in the configurators I’m creating.

However this function doesn’t work anymore using a newer version of Three which only supports BufferGeometry.

How do I change the function to support BufferGeometry?

I am aware that I can extrude a shape defined by 2D points, but it seems that the shape always wants to close itself.

2

Hi!
You can do it this way: https://codepen.io/prisoner849/pen/VwXMmvZ?editors=0010

изображение
изображение979×860 4.43 KB 

function extrudePath(points, depth) {
  let geometry = new THREE.PlaneGeometry(0, 0, points.length - 1, 1);
  let pos = geometry.attributes.position;

  for (let i = 0, l = points.length, p; i < l; i++) {
    let p = points[i];
    pos.setXYZ(i, p.x, p.y, p.z + depth);
    pos.setXYZ(i + points.length, p.x, p.y, p.z)
  }
  
  geometry.computeVertexNormals();
  return geometry;
}
1 Like
3

Thanks a lot for the quick answer, works like a charm!

4

You’re welcome :beers: :handshake:

5

Another question, the shading looks weird, see screenshot:
How should I fix this?

image
image1048×1001 94.9 KB

6

Ok this took me a while to figure out, but I fixed it by converting the new geometry to non-indexed geometry using geometry.toNonIndexed(), this allows for “hard corners” for as far as I think I understand normals :smiley:

And after that calling geometry.computeVertexNormals()