0

I have the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="900" height="800">
      <path d="M 650,750  L 50,750  L 100,350  L 850,50  L 850,550  L 650,750" fill="none" stroke="black" stroke-width="3"  />
</svg>

When I try to render it with ExtrudeGeometry, I get the following:

enter image description here

The filling is set to none, so it should only have borders (at least this is what I am trying to achieve).

This is what I'm using to load it:

const svgResult = loader.parse(svgTxt);
svgResult.paths.forEach((path) => {
  const shapes = SVGLoader.createShapes(path);
  shapes.forEach((shape) => {
  const geom = new THREE.ExtrudeGeometry(shape, {
          bevelEnabled: true,
          bevelSize: 14,
          bevelThickness: 5,
          bevelSegments: 15,
          depth: 20,
  });

  const mesh = new THREE.Mesh(
          geom,
          new THREE.MeshPhysicalMaterial({
            color: "white",
          })
        );
   ...
  }
}
Mat
  • 461
  • 4
  • 14
  • 1
    With `ExtrudeGeometry` you will always get a triangulated shape, thus the shape always will be filled. I'm curious, how does the result have to look like? – prisoner849 Feb 10 '23 at 07:37
  • I would like to get only the 'frame' (strokes), as in the SVG rendered. Is there any other way to achieve it, or what would you use in this case? As I understood here he had a similar issue, but for him it worked (for circle): https://stackoverflow.com/questions/69879688/three-js-extrudegeometry-issue-for-svg-containing-ring – Mat Feb 10 '23 at 07:59

0 Answers0