<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">ShapePath makes holes in wrong shape plane if shapes added in specific order.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<p dir="auto">Create ShapePath as described below</p>
<p dir="auto"><em><strong>Code</strong></em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const shape = new THREE.ShapePath();

    shape.moveTo(0, 0);
    shape.lineTo(0, 9);
    shape.lineTo(8, 9);
    shape.lineTo(8, 0);
    shape.currentPath.closePath();

    shape.moveTo(1, 1);
    shape.lineTo(7, 1);
    shape.lineTo(7, 5);
    shape.lineTo(1, 5);
    shape.currentPath.closePath();

    shape.moveTo(3, 2);
    shape.lineTo(3, 4);
    shape.lineTo(5, 4);
    shape.lineTo(5, 2);
    shape.currentPath.closePath();

    shape.moveTo(4, 3);
    shape.lineTo(5, 3);
    shape.lineTo(5, 4);
    shape.lineTo(4, 4);
    shape.currentPath.closePath();

    shape.moveTo(1, 6);
    shape.lineTo(7, 6);
    shape.lineTo(7, 8);
    shape.lineTo(1, 8);
    shape.currentPath.closePath();


    const shapes = shape.toShapes();
    const geometry = new THREE.ExtrudeBufferGeometry(shapes, {
      depth: 1,
      bevelEnabled: false,
    });
    const material = new THREE.MeshPhongMaterial({ color: 0xb0b0b0});
    const mesh = new THREE.Mesh(geometry, material);
   
    scene.add( mesh );"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">shape</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ShapePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">moveTo</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">9</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">8</span><span class="pl-kos">,</span> <span class="pl-c1">9</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">8</span><span class="pl-kos">,</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-c1">currentPath</span><span class="pl-kos">.</span><span class="pl-en">closePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">moveTo</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">7</span><span class="pl-kos">,</span> <span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">7</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-c1">currentPath</span><span class="pl-kos">.</span><span class="pl-en">closePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">moveTo</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">3</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-c1">currentPath</span><span class="pl-kos">.</span><span class="pl-en">closePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">moveTo</span><span class="pl-kos">(</span><span class="pl-c1">4</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">3</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">4</span><span class="pl-kos">,</span> <span class="pl-c1">4</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-c1">currentPath</span><span class="pl-kos">.</span><span class="pl-en">closePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">moveTo</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">6</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">7</span><span class="pl-kos">,</span> <span class="pl-c1">6</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">7</span><span class="pl-kos">,</span> <span class="pl-c1">8</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">lineTo</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">,</span> <span class="pl-c1">8</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-c1">currentPath</span><span class="pl-kos">.</span><span class="pl-en">closePath</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


    <span class="pl-k">const</span> <span class="pl-s1">shapes</span> <span class="pl-c1">=</span> <span class="pl-s1">shape</span><span class="pl-kos">.</span><span class="pl-en">toShapes</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">geometry</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ExtrudeBufferGeometry</span><span class="pl-kos">(</span><span class="pl-s1">shapes</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
      <span class="pl-c1">depth</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
      <span class="pl-c1">bevelEnabled</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">material</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">MeshPhongMaterial</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">color</span>: <span class="pl-c1">0xb0b0b0</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">mesh</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Mesh</span><span class="pl-kos">(</span><span class="pl-s1">geometry</span><span class="pl-kos">,</span> <span class="pl-s1">material</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
   
    <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span> <span class="pl-s1">mesh</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><em><strong>Live example</strong></em></p>
<ul dir="auto">
<li><a href="https://jsfiddle.net/4rfsqp75/" rel="nofollow">jsfiddle-latest-release</a></li>
</ul>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Hole should be in correct shape plane</p>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto">Shape adding order:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13413484/101473792-f5456780-3952-11eb-898a-91ac20984217.png"><img src="https://user-images.githubusercontent.com/13413484/101473792-f5456780-3952-11eb-898a-91ac20984217.png" alt="1" style="max-width: 100%;"></a><br>
Expected result:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13413484/101473795-f5ddfe00-3952-11eb-8fa5-024329efc5e8.png"><img src="https://user-images.githubusercontent.com/13413484/101473795-f5ddfe00-3952-11eb-8fa5-024329efc5e8.png" alt="2" style="max-width: 100%;"></a><br>
Actual result:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13413484/101473797-f6769480-3952-11eb-856a-abe568fe9180.png"><img src="https://user-images.githubusercontent.com/13413484/101473797-f6769480-3952-11eb-856a-abe568fe9180.png" alt="3" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Desktop]</li>
<li>OS: [Windows]</li>
<li>Browser: [Chrome]</li>
<li>Three.js version: [latest release]</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>