OBJ file not rendering properly in three.js

Questions
,
1

I’m trying to just only rerender local .obj model using OBJLoader and did’t add any changes to it. But what I got was not satisfying–There are some triangles around every circle while not the original one:

original:
1

what I got:
2

main code:

    var loader = new THREE.OBJLoader();
        loader.load("star.obj", function (object) {
            object.traverse( function ( child ) {
                if (child instanceof THREE.Mesh) {
                    var simplify = new THREE.Geometry().fromBufferGeometry(child.geometry);
                    simplify.computeFaceNormals();
                    simplify.mergeVertices();     
                    simplify.computeVertexNormals();
                    material = new THREE.MeshNormalMaterial();
                    mesh = new THREE.Mesh(simplify, material);
                    mesh.scale.set(6, 6, 6);
                    scene.add(mesh);
                  }
            });
        });

Any way to solve this?

2

Why are you converting your BufferGeometry to Geometry? Do the artefacts still exist if you just do this?

    var loader = new THREE.OBJLoader();
    loader.load("star.obj", function (object) {
        scene.add(object);
    });

If they do, it’s probably because your model is created using quads (4 sided polygons), which must be converted to triangles when loaded in three.js. This is done automatically by the OBJLoader, but you might get better results if you do it manually in your modelling program.

3

No, it does’t exist!
Converting BufferGeometry to Geometry because I want to decimate it using
THREE.SimplifyModifier. And now I know why:
simplify.computeVertexNormals();
just because of this line, if I delete it, there will be no more triangles on it! Then I googled about computeVertexNormals here:
"OBJLoader returns non-indexed BufferGeometry…"
If I am in this case, What’s the best way to solve this?

4

In this case, i would recommend to perform the simplification of the geometry in your content creation or modelling tool. Then load and add the model to your scene without modifications.

5

Thanks.
Finally I solve this by adding original vertexNormals to New Triangle in SimplifyModifier.js, then put them back to face in new geometry.