<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Similarly to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="597812970" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/19102" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/19102/hovercard" href="https://github.com/mrdoob/three.js/issues/19102">#19102</a>. The following SVG renders correctly in Chrome, Firefox, Android, but incorrectly on the latest three.js commit.</p>
<p dir="auto"><a href="https://github.com/mrdoob/three.js/files/4513542/8.txt">8.txt</a></p>
<p dir="auto">Repro: <a href="https://jsfiddle.net/9Lth4x8w/" rel="nofollow">https://jsfiddle.net/9Lth4x8w/</a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Android</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">When creating a polygon with constructPathShape.toShapes the order of the constructpathshapes commands plays a role which shouldn't be the case. (I think so)<br>
I am adding a hole than the outer vertice then again a hole.<br>
The last hole is not recognized.<br>
<a href="https://jsfiddle.net/0g9bdar5/2/" rel="nofollow">https://jsfiddle.net/0g9bdar5/2/</a></p>
<p dir="auto">The only thing which was changed is the order of the constructpathshape commands.<br>
If I add the two holes at the beginning the polygon is rendered correctly.<br>
<a href="https://jsfiddle.net/0g9bdar5/3/" rel="nofollow">https://jsfiddle.net/0g9bdar5/3/</a></p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> latest</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>