SVGLoader pointsToStroke incorrect results when linejoin set to bevel

[IRobot1]

Description

When passing a simple 3 point shape to SVGLoader pointToStroke, when linejoin is set to bevel, the resulting geometry is incorrect.

It works correctly when line join is set to miter or round

Two clues that might help

1. If I use positive y values, it renders correctly

  shape.moveTo(-4, 4);
  shape.lineTo(0, 0);
  shape.lineTo(4, 4);

2. If I make the material DoubleSided it renders correctly

Reproduction steps

create a 3 point line shape
getStrokeStyle passing linejoin set to 'bevek'
pass resulting shape and stroke style to pointsToStroke
render the resulting geometry to a mesh

Code

const shape = new Shape();
  shape.moveTo(-4, -4);
  shape.lineTo(0, 0);
  shape.lineTo(4, -4);

  const style = SVGLoader.getStrokeStyle(
    2,
    "black",
    "bevel",
    "square",
    undefined
  );

  const geometry = SVGLoader.pointsToStroke(shape.getPoints(), style);
  const material = new MeshBasicMaterial();
  const rect = new Mesh(geometry, material);
  scene.add(rect);

Live example

https://codesandbox.io/s/three-linejoin-bevel-test-4t7ppp

Screenshots

Version

156.1

Device

Desktop

Browser

Edge

OS

Windows

[IRobot1]

When I rotate the scene (using orbit), the missing triangles are facing backwards. So likely the normal is just wrong or not being calculated.

[WestLangley]

When I rotate the scene (using orbit), the missing triangles are facing backwards.

That is a winding order issue, not a normals issue. Try

  material.side = DoubleSide;