用three.js加载obj

Question

i'm new with three.js and in 3d graphics in general. I have to load a file obj, which is "high defined", actually i've found the way to load it on the screen, but it isn't well defined as i want.

The file is an OBJ file, a ring with some pearl, but in the ring i see some lines and the object is not weel defined. Actually i use this script to load the object:

            app.loadObj( {
            path: 'obj/',
            fileObj: 'prova.obj',
            pivot: pivotA,
            overdraw: true,
            instanceNo: 0
        } );

In the first picture is the ring with the lines that i'm talking about, in the second image how the ring should be rendered.

(As always, sorry for my bad English)

Answer 1

Looking at the OBJ file that you are loading on the site linked: Ring OBJ , I don't think you have vertex normals defined.

Take a look at the Wikipedia article on the Wavefront .obj file format . You will see that the way vertex normals are defined are at the face level with an index to the normal being used.

For example, here is the OBJ definition of a Triangle:

v 0.00 0.00 0.00
v 0.00 1.00 0.00
v 1.00 0.00 0.00

vt 0.00 0.00
vt 0.00 1.00
vt 1.00 0.00

vn 0.00 0.00 1.00

f 0/0/0 1/1/0 2/2/0

• v 0.00 0.00 0.00 defines a vertices position
• vt 0.00 0.00 defines a texture UV position
• vn 0.00 0.00 1.00 defines a normal
• f 0/0/0 1/1/0 2/2/0 defines a face that uses the indexes of each component f vertexIndex/uvIndex/normalIndex ...

In your file, if you look all the way at the bottom, you will see that your faces are defined without normals. They include a vertex index and a UV index, but no normal:

v 3.462315 8.68541 -0.125
v 3.462315 8.68541 -0.497999
v 3.49977 8.670371 -0.766575
...

vt 0.166677 0 0
vt 0.166677 0.029819 0
vt 0.166677 0.052183 0
vt 0.166677 0.067092 0
...

f 1/1 8/8 25/25 
f 8/8 9/9 25/25 
f 9/9 10/10 24/24 
f 10/10 2/2 51/51 
f 2/2 11/11 49/49 
...

Because you are not providing vertex normals, Three.js is likely calculating default normals for you. The easiest way to do this is per face, with no smoothing.

The calculation amounts to: cross((v1 - v0), (v2 - v0)) and this single normal is probably used for all vertices of the face which is why you get the very sharp, hard edges that you are seeing in your image.

This is probably an issue with the way you are exporting your mesh from your modelling software. Go through the configuration again and make sure that you tick whatever checkbox says that you want normals included.