<p dir="auto">I desire to visualize a mesh + its wireframe. The mesh is open and therefore some back faces are visible.</p>
<p dir="auto">Using a solid color for the wireframe gives uneven contrast between the shaded triangles and the unshaded edges:</p>
<p dir="auto"><a href="http://jsfiddle.net/4nf8y3z1/1/" rel="nofollow">http://jsfiddle.net/4nf8y3z1/1/</a></p>
<p dir="auto">Using <code class="notranslate">lights: true</code> on the LineBasicMaterial seems not to work:</p>
<p dir="auto"><a href="http://jsfiddle.net/4nf8y3z1/2/" rel="nofollow">http://jsfiddle.net/4nf8y3z1/2/</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot set property 'value' of undefined
three.js:22031 Uncaught TypeError: Cannot set property 'needsUpdate' of undefined
three.js:22031 Uncaught TypeError: Cannot set property 'needsUpdate' of undefined"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot set property 'value' of undefined
three.js:22031 Uncaught TypeError: Cannot set property 'needsUpdate' of undefined
three.js:22031 Uncaught TypeError: Cannot set property 'needsUpdate' of undefined
</code></pre></div>
<p dir="auto">As a workaround, I'm using a MeshPhongMaterial and a Mesh for the wireframe too, using the same geometry, and passing <code class="notranslate">wireframe: true</code>. This works great for the front-faces, but not for the back faces:</p>
<p dir="auto"><a href="http://jsfiddle.net/4nf8y3z1/3/" rel="nofollow">http://jsfiddle.net/4nf8y3z1/3/</a></p>
<p dir="auto">Therefore, I played a bit with the GLSL shaders to change the illumination models such that instead of saturating dotNL, it takes the absolute value, so that back faces are shaded exactly as if they were front-facing:</p>
<p dir="auto"><a href="http://jsfiddle.net/4nf8y3z1/4/" rel="nofollow">http://jsfiddle.net/4nf8y3z1/4/</a></p>
<p dir="auto">(this last jsfiddle is the same as the previous, except that it includes <a href="http://dalboris.com/threejs_wireframe_fix/three_fix.js" rel="nofollow">three_fix.js</a> instead of three.min.js)</p>
<p dir="auto">I just wanted to share this with you, and let you decide whether you want to integrate these changes, possibly with more thought (is changing saturate -&gt; abs always ok, or could it break other thing? is the additional cost of the abs() ok? maybe this should be a parameter of the material? etc.).</p>
<p dir="auto">For now, I just directly modified the build file three.js to get what I wanted, I don't have much more time for further investigation. :)</p>
<p dir="auto">Great library by the way, I've started using it two days ago and I love it!</p>
<p dir="auto">Know of anything like that? Trying to learn more about the history, approach, goals, etc.<br>
Thanks!</p>