SVGLoader pointsToStroke incorrect UV mapping when texture applied

[IRobot1]

Description

This problem isn't new. It's been around for a long time.

When adding a texture to the stroke generated by SVGLoader.pointsToStroke, the resulting UV mapping is incorrect for straight parts and the last triangle.

The UV mapping for a Bezier curve look really good except at the end

The UV mapping for a straight line doesn't look good at all

The UV mapping for a curved lines looks good for the bends, but not for the straight lines

Reproduction steps

set stroke style
pass points into SVGLoader.pointsToStroke to get geometry
assign texture to material
add mesh to scene

Code

const style = SVGLoader.getStrokeStyle(0.12, "black", "miter", "butt");

const texture = new TextureLoader().load("./src/road.png");

  const geometry = SVGLoader.pointsToStroke(
    straightpoints.map((v) => new Vector2(v.x, v.y)),
    style
  );
  const material = new MeshBasicMaterial({ map: texture });
  const rect = new Mesh(geometry, material);
  scene.add(rect);
  rect.position.x = 0.2;

Live example

https://codesandbox.io/p/sandbox/three-stroke-texture-uv-h9w76x?file=%2Fsrc%2Findex.js

Screenshots

Version

160

Device

Desktop

Browser

Edge

OS

Windows

[Mugen87]

@nieyuyao Do you have any ideas how we could improve the situation in SVGLoader?

I've created an editable fiddle based on @IRobot1's codesandbox. There is also a new (commented out) line in the code that loads a uv debug texture that might help to investigate the issue.

https://jsfiddle.net/n47fxmy5/2/

[nieyuyao]

@Mugen87 The issue seems to be that the uv.y of currentPointL and currentPointR are incorrect.

three.js/examples/jsm/loaders/SVGLoader.js

Lines 2920 to 2930 in 69e8505

	function makeSegmentTriangles() {
	addVertex( lastPointR, u0, 1 );
	addVertex( lastPointL, u0, 0 );
	addVertex( currentPointL, u1, 0 );
	addVertex( lastPointR, u0, 1 );
	addVertex( currentPointL, u1, 1 );
	addVertex( currentPointR, u1, 0 );
	}

But I don't have a good idea of how to improve the loader.

[IRobot1]

Confirmed fixed in v161