Sphere with transparent material "display glitch"?


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…):

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 );



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


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

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?

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

Could you create a fiddle of it?