# OBJ file not rendering properly in three.js

**URL:** <https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548>\
**Category:** Questions\
**Tags:** obj-loader, geometry\
**Created:** [December 31, 2017, 4:05pm UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548 "2017-12-31T16:05:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dickrsunny](https://avatars.discourse-cdn.com/v4/letter/d/e480ec/32.png) [@dickrsunny](https://discourse.threejs.org/u/dickrsunny)\
**Post date:** [December 31, 2017, 4:05pm UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548/1 "2017-12-31T16:05:13Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/1X/cc0823015b56b7b3daaab5ae775f625faf78c2f3.jpg)

what I got:  
 ![2](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/1X/0eb63f465379563997e0d534d6f9ef799bc8bccd.jpg)

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?

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [January 2, 2018, 2:30am UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548/2 "2018-01-02T02:30:48Z")

</div>

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

```auto
    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.

---

<div class="post-metadata">

**Author:** ![dickrsunny](https://avatars.discourse-cdn.com/v4/letter/d/e480ec/32.png) [@dickrsunny](https://discourse.threejs.org/u/dickrsunny)\
**Post date:** [January 2, 2018, 2:43pm UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548/3 "2018-01-02T14:43:15Z")

</div>

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](https://github.com/mrdoob/three.js/issues/8378):  
"OBJLoader returns non-indexed BufferGeometry…"  
If I am in this case, What’s the best way to solve this?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 2, 2018, 3:08pm UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548/4 "2018-01-02T15:08:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dickrsunny](https://avatars.discourse-cdn.com/v4/letter/d/e480ec/32.png) [@dickrsunny](https://discourse.threejs.org/u/dickrsunny)\
**Post date:** [January 3, 2018, 7:12am UTC](https://discourse.threejs.org/t/obj-file-not-rendering-properly-in-three-js/1548/5 "2018-01-03T07:12:37Z")

</div>

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