How to create 3D tube geometry from 2D shape

Questions
, ,
1

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?

image
image1159×985 39.4 KB

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

Try it with TubeGeometry :https://jsfiddle.net/uaghx80y/

Sidenote: When using TubeGeometry, you always have to input a 3D path. If the path is defined in 2D , you have to convert the data to 3D first.