javascript - Three.js renders geometry wrongly

Question

Three.js often renders unnecessary surfaces when loading .obj files (I haven't tried other types). In the screenshot I attached below, there are some triangle surfaces that look like webbed fingers. How do I get rid of it?

I think the .obj file is okay because it's rendered correctly in Blender. It's exported from sketchup and it wasn't webbed before exporting.

View in Blender

View in Three.js

Below is the code I'm using to load .obj

const loadManager = new THREE.LoadingManager();
loadManager.addHandler(/.dds$/i, new DDSLoader());

const loadObj = (path, mtl) => {
  return new Promise((res) => {
    new OBJLoader(loadManager).setMaterials(mtl).load(
      path,
      async (object) => {
        scene.add(object);
        render()
        res(object)
      },
      () => {
        console.log("loading .obj, started at", new Date());
      },
      () => {
        console.log("loading .obj got error");
      }
    );
  })
}

I have no clue to fix this problem. I'll appreciate any kind of opinion. Thanks.

Answer 1

等待大神答复