时间戳

首页 > 解决方案 > Three.js 在一个网格上使用多种材质

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

结合它们

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

标签： javascriptthree.jsaframe8thwall-web

解决方案

WebGL 不允许在单个网格上使用多种材质。这就是为什么THREE.Mesh构造函数只允许一种 geometry 和一种 material。

为了做你想做的事，你可以创建两个网格，其中一种材质的透明度设置为 0.5。但更常见的是，您只使用一个网格，并通过.alphaMap纹理分配不透明度的变化。这将为您提供更大的灵活性，因为您可以在单个对象上拥有更多透明度值，而无需为每个对象创建新材质：

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!

推荐阅读