Why do two faces appear invisible in ThreeJs?

Question

I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.

So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:

But when I import the .obj and .mtl file into ThreeJs I get this:

Is this a problem to do with me not updating the material being added to the new object? The handles appearing white makes me think this is the case. If so how can I go about fixing it?

Answer 1

When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).

To fix this, you should try the following:

• In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
• You should now see if any of the normals are pointing inwards/in the wrong direction.
• There is an automatic fix that works well for properly constructed meshes:
  • select object and switch into edit-mode (<Tab>)
  • select all vertices (shortcut &ltA>)
  • via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).