# Faces disappear when viewing from the front side

**URL:** <https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638>\
**Category:** Questions\
**Tags:** materials, geometry\
**Created:** [August 4, 2021, 9:41am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638 "2021-08-04T09:41:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tanqurey](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tanqurey/32/19910_2.png) [@Tanqurey](https://discourse.threejs.org/u/Tanqurey)\
**Post date:** [August 4, 2021, 9:41am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/1 "2021-08-04T09:41:52Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/a/1a837eaf8846f775baaa721b7b9a8818c6500b19.jpeg)  
But when I viewed it from the back side, everything was right and nothing disappeared.  
 ![everything goes right](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/1/3103c85db6389619698922e14cdbaf84ec0eccb4.jpeg)  
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/f/6f17c013b4a7bb814b669438c8178dd7b2430ce7.jpeg)  
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 😃

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 4, 2021, 10:36am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/2 "2021-08-04T10:36:05Z")

</div>

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 🤔

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 4, 2021, 11:08am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/3 "2021-08-04T11:08:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tanqurey](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tanqurey/32/19910_2.png) [@Tanqurey](https://discourse.threejs.org/u/Tanqurey)\
**Post date:** [August 5, 2021, 12:55am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/4 "2021-08-05T00:55:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tanqurey](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tanqurey/32/19910_2.png) [@Tanqurey](https://discourse.threejs.org/u/Tanqurey)\
**Post date:** [August 5, 2021, 12:58am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/5 "2021-08-05T00:58:55Z")

</div>

Here’s how I create the heatmap mesh:

 ![part1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/3/b3c2bf1bd694b808a59bb624886d82e3a5ed47f3.jpeg)  
 ![part2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/6/9683a2897953e36ac37e66f1412d90ba00169628.jpeg)

---

<div class="post-metadata">

**Author:** ![Tanqurey](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tanqurey/32/19910_2.png) [@Tanqurey](https://discourse.threejs.org/u/Tanqurey)\
**Post date:** [August 5, 2021, 1:00am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/6 "2021-08-05T01:00:01Z")

</div>

Threejs version r94

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 5, 2021, 1:02am UTC](https://discourse.threejs.org/t/faces-disappear-when-viewing-from-the-front-side/28638/7 "2021-08-05T01:02:52Z")

</div>

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