Блог

Я пытаюсь понять, как добавить несколько материалов в сетку. Я хочу взять существующий материал и применить другой слегка прозрачный материал к моей существующей сетке. Прямо сейчас, передавая его как массив, он просто исчезает. Я знаю, что мне чего-то не хватает, просто не уверен, что это такое. Конечная цель состоит в том, чтобы я мог анимировать непрозрачность ввода / вывода нового материала поверх существующего.

Исходный материал

 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. Но чаще вы просто используете одну сетку и назначаете изменения непрозрачности .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!