<h5 dir="auto">Description of the problem</h5>
<p dir="auto">BLEND mode when loading a gltf is broken in three.js if a material has both texture + emission texture. Interestingly, a broken material will also break all other transparent materials (e.g. adding a 3rd object with a broken material will break totally separate materials on objects 1 + 2).</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2693840/75697694-bd1b4500-5cad-11ea-9cc3-27a2c2c608e6.png"><img src="https://user-images.githubusercontent.com/2693840/75697694-bd1b4500-5cad-11ea-9cc3-27a2c2c608e6.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2693840/75697716-c60c1680-5cad-11ea-9688-d95dc84338d5.png"><img src="https://user-images.githubusercontent.com/2693840/75697716-c60c1680-5cad-11ea-9688-d95dc84338d5.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">A workaround, for whatever reason, is to use KHR_Texture_Transform - if TexTransform is present on a material, it will not break but instead display texture + emission texture correctly.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2693840/75697736-cdcbbb00-5cad-11ea-8b03-ea36fb5e339c.png"><img src="https://user-images.githubusercontent.com/2693840/75697736-cdcbbb00-5cad-11ea-8b03-ea36fb5e339c.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/2693840/75697764-d6bc8c80-5cad-11ea-9135-04f1efa54971.png"><img src="https://user-images.githubusercontent.com/2693840/75697764-d6bc8c80-5cad-11ea-9135-04f1efa54971.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Live reproduction:<br>
<a href="https://glitch.com/edit/#!/spice-water-dormouse" rel="nofollow">https://glitch.com/edit/#!/spice-water-dormouse</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=""> r114</li>
</ul>
<p dir="auto">Note that this breaks in all of the following:</p>
<ul dir="auto">
<li>Visual Studio Code glTF extension, only in three.js mode, Cesium and Babylon work fine</li>
<li>model-viewer (e.g. your <a href="https://model-viewer-tester.glitch.me/" rel="nofollow">https://model-viewer-tester.glitch.me/</a>)</li>
<li><a href="https://gltf-viewer.donmccurdy.com/" rel="nofollow">https://gltf-viewer.donmccurdy.com/</a></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"><code class="notranslate">Box3</code>'s <code class="notranslate">expandByObject</code> fails for buffer geometry whose <code class="notranslate">itemSize !== 3</code>.</h5>
<p dir="auto">If you call <code class="notranslate">expandByObject(obj)</code> where <code class="notranslate">obj</code> has a child with (for example) a <code class="notranslate">TextGeometry</code>, this line will attempt to read past the end of an array, then call <code class="notranslate">applyMatrix4</code> so that <code class="notranslate">v1</code> is <code class="notranslate">{x:NaN, y:NaN, z:NaN}</code>:<br>
<a href="https://github.com/mrdoob/three.js/blob/master/src/math/Box3.js#L255">https://github.com/mrdoob/three.js/blob/master/src/math/Box3.js#L255</a><br>
This means that the box's <code class="notranslate">min</code> and <code class="notranslate">max</code> both become <code class="notranslate">NaN, NaN, NaN</code>.</p>
<p dir="auto">One (obviously not optimized) solution is to replace that line with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (attribute.itemSize === 2) {
  var v2 = new Vector2();
  v2.fromBufferAttribute(attribute, i);
  v1.x = v2.x;
  v1.y = v2.y;
  v1.z = 0;
} else {
   v1.fromBufferAttribute(attribute, i);
}
v1.applyMatrix4(node.matrixWorld);"><pre class="notranslate"><code class="notranslate">if (attribute.itemSize === 2) {
  var v2 = new Vector2();
  v2.fromBufferAttribute(attribute, i);
  v1.x = v2.x;
  v1.y = v2.y;
  v1.z = 0;
} else {
   v1.fromBufferAttribute(attribute, i);
}
v1.applyMatrix4(node.matrixWorld);
</code></pre></div>
<p dir="auto">Of course, this would fail if <code class="notranslate">attribute.itemSize === 4</code>. (I'm not sure ever happens in practice.) You can fix that by checking if <code class="notranslate">itemSize ===3</code> before reading from it with a <code class="notranslate">Vector3</code>.</p>
<p dir="auto">This is not a problem with <code class="notranslate">setFromBufferAttribute</code> because that does not rely on <code class="notranslate">Math.min</code> or <code class="notranslate">Math.max</code>, which favor <code class="notranslate">NaN</code> over any numbers. (Instead it uses <code class="notranslate">&lt;</code> and <code class="notranslate">&gt;</code> which favor numbers over <code class="notranslate">NaN</code>.)</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>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> r93</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" 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>