Extruded Arc Shape Geometry Issue

Based on the information provided, it seems you're having issues with an extruded arc shape geometry not closing properly. While I can't directly access the jsFiddle link you shared, I can provide some guidance on common issues with ExtrudeGeometry in Three.js, particularly when working with arc shapes.

Common Issues with Extruded Arc Shapes

When working with arc shapes and ExtrudeGeometry, several issues can prevent proper closure:

1. Incomplete Path Definition: Make sure your arc path is properly defined with all necessary points.

2. Missing Path Closure: For a closed shape, ensure your path is explicitly closed.

3. Extrusion Settings: Check your extrusion settings, particularly the steps parameter which affects the smoothness of the extrusion.

Suggested Solutions

Here's how you might fix your extruded arc shape:

JAVASCRIPTCopied
function extrudeDisc(innerRadius, outerRadius, startAngle, endAngle, depth) {
    // Create a shape for the arc
    const arcShape = new THREE.Shape();
    
    // Move to the starting point on the outer radius
    arcShape.moveTo(
        outerRadius * Math.cos(startAngle),
        outerRadius * Math.sin(startAngle)
    );
    
    // Draw the outer arc
    arcShape.absarc(0, 0, outerRadius, startAngle, endAngle, false);
    
    // Draw a line to the inner radius
    arcShape.lineTo(
        innerRadius * Math.cos(endAngle),
        innerRadius * Math.sin(endAngle)
    );
    
    // Draw the inner arc in the opposite direction
    arcShape.absarc(0, 0, innerRadius, endAngle, startAngle, true);
    
    // Close the shape
    arcShape.closePath();
    
    // Extrusion settings
    const extrudeSettings = {
        steps: 1,
        depth: depth,
        bevelEnabled: false
    };
    
    // Create the extruded geometry
    const geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
    
    return geometry;
}

Key points to note:

1. Using absarc() for precise arc drawing
2. Explicitly closing the path with closePath()
3. Setting appropriate extrusion settings

If you're still experiencing issues, you might want to check:

• Whether your angles are defined in radians (Three.js uses radians)
• If your inner and outer radii values are appropriate
• Whether the arc spans more than 2π radians, which might require special handling

For more complex shapes, you might also consider using the CurvePath class to create a more detailed path before extrusion.