1

I'm attempting to create a sphere in three.js with a base material and a transparent png material over the top. I found this answer helpful in understanding how to load multiple materials. However when I try to apply this to SphereGeometry rather than BoxGeometry as in the example, only the second material is visible, with no transparency.

http://jsfiddle.net/oyamg8n3/1/

// geometry
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
geometry.clearGroups();
geometry.addGroup( 0, Infinity, 0 );
geometry.addGroup( 0, Infinity, 1 );
geometry.addGroup( 0, Infinity, 2 );
geometry.addGroup( 0, Infinity, 3 ); 

// textures
var loader = new THREE.TextureLoader();
var splodge = loader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png', render );
var cat = loader.load('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80.jpeg', render)

// materials
var catMat = new THREE.MeshPhongMaterial( {
    map: cat,
} );

var splodgeMat = new THREE.MeshPhongMaterial( {
    map: splodge,
    alphaTest: 0.5,
} );

var materials = [ catMat, splodgeMat ];

// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );

Can I use these same principles for 

var geometry = new THREE.SphereGeometry( 5, 20, 20 );
user3821345
  • 648
  • 1
  • 11
  • 33

1 Answers1

1

It does work if you use SphereBufferGeometry and not SphereGeometry. Notice that both classes have a different super class. You want to work with the BufferGeometry version.

Demo: http://jsfiddle.net/r6j8otz9/

three R105

Mugen87
  • 28,829
  • 4
  • 27
  • 50