Three.js ExtrudeGeometry and Custom Normals

When working with ExtrudeGeometry in Three.js for shapes containing both lines and arcs, you're encountering a common issue with normal calculation. Unfortunately, there isn't a built-in way in ExtrudeGeometry to preserve the original shape's normal definition exactly as you described.

The computeVertexNormals() method, as you've noted, calculates normals by averaging the face normals of all faces that share a vertex. This works well for smooth surfaces but doesn't maintain the distinct normal orientations you want at the boundaries between arcs and lines.

Your Options

You'll need to compute custom normals for your geometry. Here's how you can approach this:

1. Create your extruded geometry
2. Access the buffer attributes to modify the normals
3. Calculate custom normals based on the original shape's geometry
4. Apply these normals to your geometry

Example Approach

JAVASCRIPTCopied
// After creating your extruded geometry
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

// Get access to the normal buffer attribute
const normalAttribute = geometry.getAttribute('normal');
const positionAttribute = geometry.getAttribute('position');

// For each vertex that needs custom normals
for (let i = 0; i < positionAttribute.count; i++) {
    // Determine if this vertex is part of an arc
    if (isPartOfArc(i)) {
        // Calculate normal pointing from arc center
        const arcCenter = getArcCenter(i);
        const vertexPos = new THREE.Vector3(
            positionAttribute.getX(i),
            positionAttribute.getY(i),
            positionAttribute.getZ(i)
        );
        
        // Calculate normal direction (for side faces)
        const normal = new THREE.Vector3()
            .subVectors(vertexPos, arcCenter)
            .normalize();
            
        // Set the custom normal
        normalAttribute.setXYZ(i, normal.x, normal.y, normal.z);
    }
    else if (isPartOfLine(i)) {
        // Calculate perpendicular normal for line segments
        // ...
    }
}

// Update the normals
normalAttribute.needsUpdate = true;

This is a simplified example. In practice, you'll need to:

1. Track which vertices correspond to which parts of your original shape
2. Handle the top and bottom faces of the extrusion differently
3. Ensure normals are consistent across the extruded sides

Since this is a complex task, you might want to look into using the BufferGeometryUtils to help with normal calculations, or consider creating a custom geometry builder that generates the exact normals you need during construction.