# Depending on the camera position, transparent parts of the model disappear in a transparent bubble

**URL:** <https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442>\
**Category:** Questions\
**Tags:** transparency, models, materials\
**Created:** [January 30, 2023, 5:22pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442 "2023-01-30T17:22:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 30, 2023, 5:22pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/1 "2023-01-30T17:22:36Z")

</div>

In a larger project, I place loaded models and self-created geometries optionally in bubbles. The bubbles are preferably spheres created with SphereGeometry or IcosahedronGeometry. However, they can also be other geometries such as BoxGeometry or CylinderGeometry.

This works well, but sometimes the transparent wings of the bee disappear.

![2023-01-30 11.52.50](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/98e3ee24aadb848090abfb63945bf777db3a85e9.png) ![2023-01-30 11.52.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/3034e158c356345dd03eceebeb406636b4db2330.png)

For demonstration I have created a simple excerpt from the project: [material.TEST](https://hofk.de/main/threejs/1TEST/materialTEST/material.TEST.html)

I found in some places that it is problematic when transparent materials are one behind the other.

But maybe there is a solution for my special case? 🤔

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 30, 2023, 7:15pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/2 "2023-01-30T19:15:29Z")

</div>

Maybe its Z sorting. Try use `renderOrder:-1` or `renderOrder:1` for wings

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 30, 2023, 7:27pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/3 "2023-01-30T19:27:14Z")

</div>

The problem is that the user can load any models into the bubbles. He only has to specify the file path or URL in the input.

The bee is just my example where I noticed the problem. Since I do not work with modeling software myself, I use simple, freely available models for testing. For example from google poly, which was shut down some time ago.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 30, 2023, 7:47pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/4 "2023-01-30T19:47:32Z")

</div>

Then traverse model and for all transparent objects add renderOrder.  
Or for bubbles

---

<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:** [January 30, 2023, 8:14pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/5 "2023-01-30T20:14:39Z")

</div>

Setting `material.depthWrite = false` for all transparent materials, including those in the model, may help. Beyond that I think you’ll want to try to force the bubble to render last, e.g. with render order, after everything inside it.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 30, 2023, 8:28pm UTC](https://discourse.threejs.org/t/depending-on-the-camera-position-transparent-parts-of-the-model-disappear-in-a-transparent-bubble/47442/6 "2023-01-30T20:28:22Z")

</div>

Thank you very much! It seems to work with Icosahedron.renderOrder = 1;

Added the solution to the example above.