Faces disappear when viewing from the front side

Questions
,
1

Hi, I’m using threejs to create a heatmap with mapbox. I generated its vertices, faces, and vertexColors according to my data, pushing them into the geometry. After viewing the result in my browser, I found a problem.
when I viewed the heatmap from the front side, some parts(faces) of the heatmap mesh disappeared.

some faces disappear
some faces disappear1920×1440 235 KB

But when I viewed it from the back side, everything was right and nothing disappeared.
everything goes right
everything goes right1920×1440 229 KB

More and more faces began to disappear when I was changing my view to the front side, this is a process.
some faces of the peak begin to disappear
some faces of the peak begin to disappear1920×1440 320 KB

This is NOT a problem cause by material.side, it has been set to THREE.DoubleSide
I’ve tried several ways below to solve the problem, but they didn’t work:
1.change the near / far of the perspective camera
2.set material.depthWrite/depthTest to false
3.set mesh.frustumCulled to false

I’ll appreciate ur suggestion for me :smiley:

2

Could you share a preview link / more detailed video of what’s happening? Since you crossed out the primary options (ie. Material.side and near/far planes), it’s a bit hard to tell just from screenshots of discrete views :thinking:

3

@Tanqurey
Maybe you have set that parameter of material? transparent: true

4

Thank u, I’ve tried but it didn’t work.

5

Here’s how I create the heatmap mesh:

part1
part11920×1440 486 KB

part2
part21920×1440 421 KB

6

Threejs version r94

7

Could you share a demo, a JSFiddle, or testable code rather than screenshots of that code? We will not be able to test or debug for you using screenshots.

If you are using transparent: true (which should be false unless you really need it!) then you should generally also be using depthWrite: false.

1 Like