title: Three.js coloring the wrong side of a VRML object's faces
body: <p><a href="https://75thtrombone.com/links/stack-exchange/2016-09/example.wrl" rel="nofollow noreferrer">Here's a VRML file</a> that I'm trying to display with three.js. When I preview that file in a standalone viewer like <a href="http://castle-engine.sourceforge.net/view3dscene.php" rel="nofollow noreferrer">view3dscene</a>, it looks correct:</p>
  
  <p><a href="https://i.stack.imgur.com/h6D7q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h6D7q.png" alt="3D rendering of a bolt"></a></p>
  
  <p>However, in Three.js using the example VRMLLoader, the insides of the faces are colored instead of the outsides:</p>
  
  <p><a href="https://i.stack.imgur.com/7Y8Yo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Y8Yo.png" alt="Rendering of the same bolt, but the outside is transparent, revealing the concave back side"></a></p>
  
  <p>Looks clear to me that three.js is reading the correct color information, just applying it to the faces incorrectly. But I'm very new to working with 3D, so I'm not sure where the discrepancy lies or what I can do to fix it.</p>
  
  <p>I'm not doing anything fancy with loading the file; it's just as in the example code:</p>
  
  <pre><code>loader.load('https://75thtrombone.com/links/stack-exchange/2016-09/' + model, function(geometry) {
      scene.add(geometry);
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/75th/mysvs9qf/" rel="nofollow noreferrer">Here's a fiddle</a> with my code and a view of the problem. (Zoom in with the mouse wheel, drag to rotate.) Any help, insight, direction towards something to read to learn more, or any other clues at all would be wonderful.</p>