Extruding Geometry Radially

what would be the best method as to take a group of 2d closed shapes (all in +x space say) and radially extrude them around the y axis just dependent on how far they are from 0? i’ve used lathe but that’s not meant for closed shapes i have found, and every lathed object ends up with a missing band of polys.
so … i guess this will have to be done with extrude geometry… but now every object needs a circle path going through it’s shape’s center?

is there an easier method?


Any explanatory picture of this? Or better an editable working live code example.

Not at the desk at the moment.
I think the banding is from missing one iteration in my for loop while making the points array from the object’s edges…
Maybe add 1 to array length in for loop?

Here I use LatheGeometry: Best way to flatten the top and bottom of a torus geometry - #6 by prisoner849
Does this example have the issue, that you described before? Something about “a missing band of polys”.

1 Like

ok, thanks but … no…

it’s not intentional mishap…
here’s the code…

objInput = scene.getObjectByName(objInput);
            console.log('objInput: ',objInput);

            const points = [];

                    let positions = objInput.geometry.attributes.position.array;
                    let ptCout = positions.length  / 3;
                    for (let i = 0; i < ptCout; i++)
                        let px = positions[i * 3];
                        let pxN = px * -1;
                        let py = positions[i * 3 + 1];
                        let pyN = py * -1;

                        points.push( new THREE.Vector2( pxN,pyN

                        ) );

                    console.log('positions: ',positions);

                console.log('points: ',points);

            const geometry = new THREE.LatheBufferGeometry(points,sidesInput);

            // below here is a bunch of testing for trying to seam the missing poly band
            const geoMergedVerts = THREE.BufferGeometryUtils.mergeVertices( geometry, 1 );

            const material = new THREE.MeshPhongMaterial({ color: 0x9966ff, side: THREE.DoubleSide, });

            material.flatShading = false;
            material.smoothShading = true;

            lathe = new THREE.Mesh(geoMergedVerts, material);

            lathe.name = nameInput;

            lathe.scale.multiplyScalar( 0.25 );
            lathe.position.x = - 70;
            lathe.position.y = 70;
            // lathe.scale.y *= - 1;

            console.log('lathe: ',lathe);


and that’s happening on all the elements in the collection.

This is the most enigmatic part.
Where objInput comes from and how it’s built.
Without a real example, I’m afraid, I can’t help.

1 Like

ok that’s going to be from my SVGLoader script…

let LIST_svgParts = []; // declared for return in parent code

function loadSVG( url ) {

    const loader = new THREE.SVGLoader();

    loader.load( url, function ( data ) {

        const paths = data.paths;

        for ( let i = 0; i < paths.length; i ++ ) {

            const path = paths[ i ];

            const fillColor = path.userData.style.fill;

                const material = new THREE.MeshBasicMaterial( {
                    color: new THREE.Color().setStyle( fillColor ),
                    opacity: path.userData.style.fillOpacity,
                    transparent: path.userData.style.fillOpacity < 1,
                    side: THREE.DoubleSide,
                    depthWrite: false,
                    wireframe: guiData.fillShapesWireframe
                } );

                const shapes = path.toShapes( true );
                console.log('shapes: ',shapes);


                for ( let j = 0; j < shapes.length; j ++ ) {

                    const shape = shapes[ j ];

                    const geometry = new THREE.ShapeBufferGeometry( shape );
                    let mesh = new THREE.Mesh( geometry, material );

                    let nodeId = path.userData.node.id;

                    mesh.name = nodeId;


                    mesh.scale.multiplyScalar( 0.25 );
                    mesh.position.x = - 70;
                    mesh.position.y = 70;
                    mesh.scale.y *= - 1;

                    console.log('mesh: ',mesh);
                    app.scene.add( mesh );



loadSVG( svgFileInput );                   

largely taken from here:

Looks like I have to:

  1. Use my telepathic abilities to get information about svg file you use.
  2. Combine all those pieces of code in unknown way to reproduce the issue you have.

If so, you’re on your own with it, as you don’t want or can’t or not able to provide a working live code example, that demonstrates the problem. (jsfiddle, codepen or other sandbox)

Maybe somebody else wants to do all that stuff for you.