在 three.js 中将多个材质分层到 SphereGeometry

Question

我正在尝试在 three.js 中创建一个球体，其顶部有一个基础材质和一个透明的 png 材质。我发现this answer 有助于理解如何加载多种材料。但是，当我尝试将其应用于 SphereGeometry 而不是如示例中的 BoxGeometry 时，只有第二种材质是可见的，没有透明度。

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

我可以将这些相同的原则用于

var geometry = new THREE.SphereGeometry( 5, 20, 20 );

Answer 1

如果您使用SphereBufferGeometry 而不是SphereGeometry，它确实有效。请注意，这两个类都有不同的超类。您想使用BufferGeometry 版本。

演示：http://jsfiddle.net/r6j8otz9/

three R105