Strange effect with custom buffer geometry

Questions
1

I’m new with threejs. Recently I created a geometry with vertices and indices. As you can see in these pictures, at certain view angle some surfaces are disappeared. Could someone please tell me why? Thanks!

image
image318×246 4.16 KB

image
image307×255 3.8 KB

Here is my code. Please ignore the gui and morph parts.
Edit fiddle - JSFiddle - Code Playground

2

This is caused by wrong normal vectors.

Easy fix is to set double-sided faces:

const material = new THREE.MeshPhongMaterial( {
   color: 0xff0000,
   flatShading: true,
   side: THREE.DoubleSide // <- this
} );

However, I’d strongly suggest to fix the vectors.

1 Like
3

Thank you very much for the help! I’ll add the normal attribute to my geometry. Since my first try with cube works fine, I thought I could ignore it.