CODEWITHSUNDEEP
three.jsblender
Katana24
Katana24

Reputation: 8959

Why do two faces appear invisible in ThreeJs?

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:

enter image description here

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

enter image description here

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?

Upvotes: 2

Views: 740

Answers (1)

Martin Schuhfuß
Martin Schuhfuß

Reputation: 6986

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>).

Upvotes: 2

Related Questions