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

在three.js中将多种材料分层到SphereGeometry

1 个答案: