SVGRenderer Fill Issue with Circles

Based on the information provided, you're experiencing an issue where circles in your SVG are being filled with color when rendered in Three.js, even though they should only have strokes.

Potential Causes and Solutions

The issue appears to be related to how the SVGRenderer in Three.js handles path filling. When you create meshes from SVG paths, Three.js will by default create filled geometries.

Here are some potential solutions:

1. Use Line objects instead of Mesh for stroke-only paths

For paths that should only have strokes and no fills, consider using THREE.Line instead of THREE.Mesh:

TYPESCRIPTCopied
// For paths that should only have strokes
if (path.userData?.style?.stroke && (!path.userData?.style?.fill || path.userData.style.fill === 'none')) {
  // Create a line geometry
  const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
  
  // Create a line material
  const lineMaterial = new THREE.LineBasicMaterial({ 
    color: pathColor,
    linewidth: path.userData?.style?.strokeWidth || 1
  });
  
  // Create a line instead of a mesh
  const line = new THREE.Line(lineGeometry, lineMaterial);
  
  // Add to group
  if (isBackLayer) {
    line.scale.x = -1;
    line.position.x = 245;
  }
  line.position.z = zPosition;
  group.add(line);
} else {
  // Continue with mesh creation for filled paths
  // ...existing mesh code...
}

2. Check your GeometryFactory implementation

The issue might be in how your GeometryFactory.createGeometry() method is creating geometries from points. Make sure it's not automatically creating filled shapes when it should only be creating outlines.

3. Use ShapeGeometry with proper holes

If your circles are meant to be hollow, ensure you're properly defining holes in your ShapeGeometry:

TYPESCRIPTCopied
// Example of creating a shape with holes
const shape = new THREE.Shape(outerPoints);
const hole = new THREE.Path(innerPoints);
shape.holes.push(hole);
const geometry = new THREE.ShapeGeometry(shape);

4. Check SVG parsing

Ensure your SVG parser is correctly interpreting the fill="none" attribute from your SVG file. You might need to explicitly check for this attribute and handle it accordingly.

Additional Considerations

• The SVGRenderer in Three.js has some limitations in how it handles complex SVG features
• Consider examining the raw SVG data to ensure the fill attributes are being correctly parsed
• You might need to implement custom logic to handle specific SVG elements like circles differently from other paths

Without seeing your complete implementation (particularly the GeometryFactory and MaterialFactory code), these are the most likely solutions to your issue. The key is to ensure that paths that should only have strokes are rendered as lines rather than filled meshes.