Hi i have 2d shapes that i want to turn into a 3d tube

I have this shape which should look something like this:

```
const testShape = new THREE.Shape();
testShape.autoClose = false;
const x = 0;
const y = 0;
const radius = 10;
const width = 50;
const height = 50;
testShape.moveTo(x, y + radius);
testShape.lineTo(x, y + height - radius);
testShape.quadraticCurveTo(x, y + height, x + radius, y + height);
testShape.lineTo(x + width - radius, y + height);
testShape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
testShape.lineTo(x + width, y + radius);
testShape.quadraticCurveTo(x + width, y, x + width - radius, y);
testShape.lineTo(x + radius, y);
```

How do i turn this into a 3D tube that is built along its path?

I tried getting the points along the shape and converting them to `Vector3D`

but as you can see the shapes has these weird pinch points

```
const arcPoints = testShape.getPoints();
const lines: THREE.LineCurve3[] = [];
for (let i = 0; i < arcPoints.length; i += 2)
{
const pointA = arcPoints[i];
const pointB = arcPoints[i + 1] || pointA;
lines.push(
new THREE.LineCurve3(
new THREE.Vector3(pointA.x, pointA.y, 0),
new THREE.Vector3(pointB.x, pointB.y, 0),
),
);
}
const CurvePath = new THREE.CurvePath();
CurvePath.curves.push(...lines);
const extrudeSettings = {
steps: 200,
bevelEnabled: false,
extrudePath: CurvePath
}
const pts1 = [];
const count = 300;
// create a circle of points
for (let i = 0; i < count; i++)
{
const l = 1;
const a = 2 * i / count * Math.PI;
pts1.push(new THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l));
}
// extruded shape
const shape = new THREE.Shape(pts1);
const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);
const mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0xdedede, shininess: 150 }));
```