title: Three.js renders geometry wrongly
body: <p>Three.js often renders unnecessary surfaces when loading <code>.obj</code> files (I haven't tried other types).
  In the screenshot I attached below, there are some triangle surfaces that look like <strong>webbed fingers</strong>. How do I get rid of it?</p>
  <p>I think the <code>.obj</code> file is okay because it's rendered correctly in Blender. It's exported from sketchup and it wasn't webbed before exporting.</p>
  <p><a href="https://i.stack.imgur.com/zNSRq.jpg" rel="nofollow noreferrer">View in Blender</a></p>
  <p><a href="https://i.stack.imgur.com/NeDpV.jpg" rel="nofollow noreferrer">View in Three.js</a></p>
  <p>Below is the code I'm using to load <code>.obj</code></p>
  <pre><code>const loadManager = new THREE.LoadingManager();
  loadManager.addHandler(/\.dds$/i, new DDSLoader());
  
  const loadObj = (path, mtl) =&gt; {
    return new Promise((res) =&gt; {
      new OBJLoader(loadManager).setMaterials(mtl).load(
        path,
        async (object) =&gt; {
          scene.add(object);
          render()
          res(object)
        },
        () =&gt; {
          console.log(&quot;loading .obj, started at&quot;, new Date());
        },
        () =&gt; {
          console.log(&quot;loading .obj got error&quot;);
        }
      );
    })
  }
  </code></pre>
  <p>I have no clue to fix this problem. I'll appreciate any kind of opinion.
  Thanks.</p>