Hello im trying to create a 3D sankey chart.
For that im generating one with D3.js and then use the SVGLoader to parse that and add it into the ThreeJS scene as it’s explained in this example three.js examples from the Documentation.
Now the problem that is happening for me is that the subpaths seem to have some weird glitches/lines that occur. This depends on the screen size for some reason. So when the scene is first rendered with a smaller browser window it does not happen. The glitches also look different depending on the size of the browser window.
I attached some images below to better explain what i mean:
It seems the issue is related to a certain path in the SVG file that defines the second large stroke. With a certain stroke-width, the loader starts to show the mentioned artifacts. This a reduced test file demonstrating the issue:
Reducing the stroke size makes the artifacts go away. Interestingly, if you disable double side rendering, you will see that the artifacts are actually triangles rendered on the back side of the mesh as well. That is definitely not right.
Would you be willing to report this issue at the GitHub repository?
Since I’m not sure how easy the issue is to fix, consider to use a workaround by making the strokes opaque and use different colors per shape if necessary.
I see, thank you. Unfortunately i can’t use that workaround because the color is supposed to represent some data thats why im limited to two colors.
For now i reduced the scale and that seems to help make the artifacts atleast a little less noticeable.
Either way I’ll report that issue in the github repo as you suggested.
