SVG Rendering Issues with Three.js SVGLoader

Looking at your code and the issue you're describing with unexpected fill areas, I can identify a few potential issues with your SVG rendering implementation.

Potential Issues

1. Double Rendering of Shapes: You're creating meshes for both fill and stroke using the same shapes, which could cause overlapping geometry.

2. Path Winding Order: SVG paths with complex shapes might have winding order issues that affect how Three.js fills them.

3. DoubleSide Material: Using THREE.DoubleSide can sometimes cause visual artifacts with overlapping geometry.

Suggested Fixes

Here's a modified version of your code that addresses these issues:

JAVASCRIPTCopied
const veinsSVGLoader = new SVGLoader(manager)
veinsSVGLoader.load(
  '<MY_SVG_URL>',
  (data) => {
    const paths = data.paths
    const group = new THREE.Group()
    group.scale.set(0.0015, -0.0015, 0.0015) // Scale down for large SVGs
    group.position.set(-0.72, 1.712, 0.15) // Center the SVG in the scene

    paths.forEach((path, index) => {
      const subGroup = new THREE.Group()

      // Handle fills
      const fillColor = path.userData.style.fill
      if (fillColor !== undefined && fillColor !== 'none') {
        const material = new THREE.MeshBasicMaterial({
          color: new THREE.Color().setStyle(fillColor),
          side: THREE.FrontSide, // Changed from DoubleSide
          depthWrite: true,      // Changed from false
          transparent: true,
          opacity: path.userData.style.fillOpacity !== undefined ? path.userData.style.fillOpacity : 1
        })

        const shapes = SVGLoader.createShapes(path)
        shapes.forEach((shape) => {
          // Handle holes properly
          const geometry = new THREE.ShapeGeometry(shape)
          const mesh = new THREE.Mesh(geometry, material)
          subGroup.add(mesh)
        })
      }

      // Handle strokes separately
      const strokeColor = path.userData.style.stroke
      if (strokeColor !== undefined && strokeColor !== 'none') {
        const strokeWidth = path.userData.style.strokeWidth || 1
        
        // Use the path directly for strokes instead of shapes
        const strokeMaterial = new THREE.LineBasicMaterial({
          color: new THREE.Color().setStyle(strokeColor),
          linewidth: strokeWidth,
          transparent: true,
          opacity: path.userData.style.strokeOpacity !== undefined ? path.userData.style.strokeOpacity : 1
        })

        for (let i = 0; i < path.subPaths.length; i++) {
          const subPath = path.subPaths[i]
          const points = subPath.getPoints()
          
          const geometry = new THREE.BufferGeometry().setFromPoints(points)
          const line = new THREE.Line(geometry, strokeMaterial)
          subGroup.add(line)
        }
      }

      subGroup.name = `group-${index}`
      group.add(subGroup)
    })

    group.renderOrder = 2
    scene.add(group)
  },
  function (xhr) {
    console.log(`Veins: ${(xhr.loaded / xhr.total) * 100}% loaded`)
  },
  function (error) {
    console.log('Veins: An error happened', error)
  }
)

Key Changes

1. Separate Fill and Stroke Handling: Instead of creating shapes for both fill and stroke, I've used different approaches for each.

2. Using FrontSide for Materials: Changed from DoubleSide to FrontSide to avoid rendering both sides of faces.

3. Proper Stroke Rendering: Using Line objects for strokes instead of filled shapes.

4. Opacity Handling: Added proper handling of fill and stroke opacity from the SVG.

5. Improved Condition Checks: Added more robust checks for fill and stroke colors.

If you're still experiencing issues, it might be worth examining your SVG file for complex paths or non-standard SVG features that might not be properly interpreted by the SVGLoader.

Another approach would be to try the official Three.js SVG example as a reference implementation: SVGLoader Example