Javascript Three.js在一个网格上使用多个材质

我试图了解如何将多个材质添加到网格中。我希望采用现有材质，并将另一种略微透明的材质应用于现有网格。现在，将其作为数组传递，它就消失了。我知道我错过了一些东西，只是不知道那是什么。最终目标是使我可以在现有材质上设置新材质进出的不透明度动画

原材料

const originalMaterial = child.material.clone();

const newMaterial = new THREE.MeshStandardMaterial({
 name: 'New Mat',
 map: newTexture,
 emissiveMap: newTextureMap,
 side: THREE.DoubleSide,
 opacity: .5,
 transparent: true
});

新材料

const originalMaterial = child.material.clone();

const newMaterial = new THREE.MeshStandardMaterial({
 name: 'New Mat',
 map: newTexture,
 emissiveMap: newTextureMap,
 side: THREE.DoubleSide,
 opacity: .5,
 transparent: true
});

组合它们

child.material = [originalMaterial, newMaterial]
child.material.needsUpdate = true

---

WebGL不允许在单个网格上使用多个材质。这就是为什么

THREE.Mesh

构造函数

若要执行所需操作，可以创建两个网格，其中一个材质的透明度设置为0.5。但更常见的情况是，只使用单个网格，并指定不透明度的变化。这将为您提供更大的灵活性，因为您可以在单个对象上拥有更多的透明度值，而无需为每个对象创建新材质：

var textureLoader = new THREE.TextureLoader();
var alphaTexture = textureLoader.load("path/to/alpha.png");
mesh.material.alphaMap = alphaTexture;

mesh.material.transparent = true; // <- don't forget this!

var textureLoader=new THREE.textureLoader（）；
var alphaTexture=textureLoader.load（“path/to/alpha.png”）；
mesh.material.alphaMap=alphaTexture；
mesh.material.transparent=true；//好主意！我将尝试在我的另一个模型上实现这一点。现在，我可以克隆我的网格并将新材质添加到其中，然后淡入/淡出克隆的网格，这就完成了。