three.js3dvertex3dsmaxnormals

normals of THREE.Mesh are different than of original model

I create an object in 3ds max, then I export it to .obj, then convert it to .gltf using three.js editor, and finally I draco compress it.

When I load it in my three.js scene, some faces seem to not have proper lighting (I use standard material) and if I make the vertex normals visible, it seems that a normals averaging (?) is happening through this whole process. Note that the vertices of interest have 2 normals each beforehand.

How can I fix this?

enter image description here

Solution

  • WebGL vertices can only have one normal each. If you want a vertex to have two normals, it's going to have to be two separate vertices occupying the same position.

    Normally the GLTF exporter would take care of this for you, but somewhere along the multi-step process of converting OBJ -> Three.js -> GLTF -> DRACO, your vertices are getting merged and averaged. I recommend two options:

    1. Try looking for a one-step 3DSMax -> DRACO exporter, looks like Babylon.js has built one already, it might solve your problem.
    2. If that doesn't work, just separate the hard edges into their own individual islands so they don't share a vertex. Keep it as a single mesh, just disconnected, like this: enter image description hereThis will force your 3D editor to split the vertex along the hard edge into two vertices in the same position. Then your export process should work fine.