I am generating a (self avoiding) random line and render it with the SVGRenderer. It all works fine so far and the result looks like I expected. Now I would like to animate the SVG path with this simple trick: https://css-tricks.com/svg-line-animation-works/.
Unfortunately this does not work properly since the SVG path is not drawn in the same order as the points in the THREE.BufferGeometry I am using to render THREE.Line.
The position attribute in the THREE.BufferGeometry look like this:
{
"position": {
"array": [
0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
-0.5
]
}
}
The path in the SVG looks like this:
<path
d="
M-65.64330204558769,28.699957217059385
L28.132843733823492,9.318167927616637
M28.132843733823492,9.318167927616637
L65.64330204558794,57.77264115122355
M-65.64330204558769,-57.77264115122372
L-65.64330204558769,28.699957217059385
M65.64330204558794,-28.699957217059552
L28.132843733823492,-77.15443044066647
M65.64330204558794,57.77264115122355
L65.64330204558794,-28.699957217059552
M-28.132843733823236,-9.318167927616805
L-65.64330204558769,-57.77264115122372
M-28.132843733823236,77.1544304406663
L-28.132843733823236,-9.318167927616805"
style="fill:none;stroke:rgb(0,0,0);stroke-opacity:1;stroke-width:20;stroke-linecap:round">
</path>
When I inspect the SVG path with this nice tool I see that the lines in the SVG path are not “in order”.
I am wondering if there is an option to customize/adjust the order of the lines in the SVG path by passing the order to the SVGRenderer? If yes, how would I do that in a nice way?
Instead of using the “Move To” M command the lines should be drawn one after another without moving after each line command. Ideally there would even be even a way to render a <polyline>
instead of a <path>
.
Thanks for your help!