hi,
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?
shortcut?
thnx
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?
Hmm
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”.
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
geometry.computeVertexNormals(true);
geometry.computeFaceNormals(true);
geometry.computeBoundingBox(true);
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;
scene.add(lathe);
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.
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;
LIST_svgParts.push(mesh.name);
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:
https://github.com/mrdoob/three.js/blob/dd55c01a0ab1ca05eb0d7a0a158113283b1f6ecf/examples/webgl_loader_svg.html#L143
Looks like I have to:
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.