How to extrude from 2D points with BufferGeometry?

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

 * Code from:
 * @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;

    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.

You can do it this way:

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)
  return geometry;
1 Like

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

You’re welcome :beers: :handshake:

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

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