Sphere with transparent material "display glitch"?

Questions
1

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

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://global.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d01699034e4dbeafb46bc00b0a353f8b3f06a0c7.webm

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

Thanks
Josh

2

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

3

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?

4

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

5

Could you create a fiddle of it?