# Sphere with transparent material "display glitch"?

**URL:** <https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351>\
**Category:** Questions\
**Tags:** transparency\
**Created:** [July 4, 2018, 12:42pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351 "2018-07-04T12:42:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oldsilverback](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@oldsilverback](https://discourse.threejs.org/u/oldsilverback)\
**Post date:** [July 4, 2018, 12:42pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351/1 "2018-07-04T12:42:14Z")

</div>

Hi,

I have a general question regarding following scenario:

- I have a sphere
- Sphere gets a transparent doublesided material (a .png texture with alpha)
- Partly the sphere´s material is not shown on the “inner side” of the sphere (s. attached screenshot and video)

Code goes like this (nothing too special here…):

```auto
var sphereGeometry = new THREE.SphereGeometry( 3, 64, 48 );
var globeMaterial = new THREE.MeshStandardMaterial( { map:THREE.ImageUtils.loadTexture( "globe.png" ), transparent:true } );

this.globe = new THREE.Mesh( sphereGeometry , globeMaterial);
this.globe.material.side = THREE.DoubleSide;

this.world.add( this.globe );

```

![missing-texture](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/8/8752977a77310c38f07d77f7d872ba6f893228e0.png)

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d01699034e4dbeafb46bc00b0a353f8b3f06a0c7.webm](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d01699034e4dbeafb46bc00b0a353f8b3f06a0c7.webm)

Can anybody maybe point me to what I´m doing wrong?

Thanks  
Josh

---

<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:** [July 4, 2018, 12:52pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351/2 "2018-07-04T12:52:04Z")

</div>

What if to use two spheres, one with its material `side: THREE.FrontSide`, the other one with `side: THREE.BackSide`?

---

<div class="post-metadata">

**Author:** ![oldsilverback](https://avatars.discourse-cdn.com/v4/letter/o/258eb7/32.png) [@oldsilverback](https://discourse.threejs.org/u/oldsilverback)\
**Post date:** [July 4, 2018, 1:05pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351/3 "2018-07-04T13:05:24Z")

</div>

This works great, but to the costs of using a 2nd geometry.

I was hoping to get this running with only one SphereGeometry - or is this (using 2 geoms one with material FrontSide, one with BackSide) the way the “cool cats” are doing it?

---

<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:** [July 4, 2018, 1:17pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351/4 "2018-07-04T13:17:13Z")

</div>

If it doesn’t make an impact on the performance, then why not? 🙂

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [July 4, 2018, 5:40pm UTC](https://discourse.threejs.org/t/sphere-with-transparent-material-display-glitch/3351/5 "2018-07-04T17:40:54Z")

</div>

Could you create a fiddle of it?