# How to extrude from 2D points with BufferGeometry?

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.

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

``````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

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

Youβre welcome

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

And after that calling geometry.computeVertexNormals()