<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">The official <a href="https://threejs.org/examples/?q=fat#webgl_lines_fat" rel="nofollow">fat line example </a> doesn't work if we change the line scale to include negative.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Go to Three.js official examples in the repo</li>
<li>Find the source file of webgl_lines_fat.html</li>
<li>At <a href="https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html#L109">line 109</a>, change to any negative scale.</li>
</ol>
<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="line.scale.set(-1, 1, 1);"><pre class="notranslate"><span class="pl-s1">line</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">-</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-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">With a negative scale, lines are disappeared.</p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: Desktop</li>
<li>OS: MacOS</li>
<li>Browser: Chrome</li>
<li>Three.js version: dev</li>
</ul>
<p dir="auto">As the title say: a <a href="https://github.com/mrdoob/three.js/blob/r98/examples/js/lines/Line2.js">Line2</a> disappears completely when the scale is set to negative on a single axis <code class="notranslate">line2.scale.set(-1, 1, 1)</code>. The line is obviously still there but it's not rendered.</p>
<p dir="auto">Weirdly, if the scale is set to negative on more than one axis <code class="notranslate">line2.scale.set(-1, -1, 1)</code>, the line appears again.</p>
<p dir="auto">Here's a jsfiddle that demonstrates the issue: <a href="https://jsfiddle.net/jacopocolo/5fsotdpw/16/" rel="nofollow">https://jsfiddle.net/jacopocolo/5fsotdpw/16/</a><br>
Toggling <code class="notranslate">wireframeToggle</code> on line 7 to true shows two Line2 in wireframe but if <code class="notranslate">wireframeToggle</code> is set to false, only one is visible.</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"> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r117</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</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"> 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" checked=""> macOS (only tested here)</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>