<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">Node order changes at each gtlf load.<br>
If 2 objects with 2 different material colours are at the same position, the rendering changes at each loading.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Go to <a href="https://codepen.io/blocovin/pen/vYJPNbm" rel="nofollow">codepen gltf loader</a></li>
<li>Reload the page</li>
<li>Observe visual differences between each load</li>
</ol>
<p dir="auto">or</p>
<ol dir="auto">
<li>Go to <a href="https://threejs.org/editor/" rel="nofollow">ThreeJS editor</a></li>
<li>Import <a href="https://blocinbloc-development-file-service-v2.s3.fr-par.scw.cloud/draco-debug.gltf" rel="nofollow">draco.gltf</a></li>
<li>Observe node order changes</li>
</ol>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The order of the objects must respect the one defined in the gltf file.</p>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto">First load (codepen):<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/39763266/142625650-58e510d4-5394-4704-8d0c-6cc4a071b20a.png"><img width="830" alt="first_load" src="https://user-images.githubusercontent.com/39763266/142625650-58e510d4-5394-4704-8d0c-6cc4a071b20a.png" style="max-width: 100%;"></a></p>
<p dir="auto">Second load (codepen):<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/39763266/142625675-c8fcbffb-3c3e-484d-a489-945171a53bc4.png"><img width="834" alt="second_load" src="https://user-images.githubusercontent.com/39763266/142625675-c8fcbffb-3c3e-484d-a489-945171a53bc4.png" style="max-width: 100%;"></a></p>
<p dir="auto">First load (threejs editor):<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/39763266/142630624-1fb4661a-a825-462d-ab28-b9f555a3b448.png"><img width="433" alt="FirstLoad" src="https://user-images.githubusercontent.com/39763266/142630624-1fb4661a-a825-462d-ab28-b9f555a3b448.png" style="max-width: 100%;"></a></p>
<p dir="auto">Second load (threejs editor):<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/39763266/142630688-632ef1b7-d080-4b3a-b6da-cf2be0b84c11.png"><img width="260" alt="SecondLoad" src="https://user-images.githubusercontent.com/39763266/142630688-632ef1b7-d080-4b3a-b6da-cf2be0b84c11.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Desktop]</li>
<li>OS: [MacOS]</li>
<li>Browser: [Chrome 96, Firefox 94]</li>
<li>Three.js version: [r134]</li>
</ul>
<p dir="auto">I just found out the order of children in a traverse 'traverse' loop in a (glb file):</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="object.traverse( function ( child ) {
//to something with child
});"><pre class="notranslate"><span class="pl-s1">object</span><span class="pl-kos">.</span><span class="pl-en">traverse</span><span class="pl-kos">(</span> <span class="pl-k">function</span> <span class="pl-kos">(</span> <span class="pl-s1">child</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-c">//to something with child</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">is different on Chrome and on Firefox.</p>
<p dir="auto">Actually, on Chrome, the order seem to be random ( is different each time the page is refreshed)</p>
<p dir="auto">Tested with a glb file exported from blender,<br>
on Chrome &amp; Firefox  linux and window 10, with three 112</p>
<p dir="auto">Is this a known issue or is there a work around for this?</p>
<p dir="auto">using threejs 112  &amp; GLTF loader as of today's version : 2020/02/28</p>