Three.js: Объедините материалы на одной грани куба (который использует несколько материалов)

Question

Я создал куб (skybox), который использует разные материалы для каждой стороны. Там нет никаких проблем с этим с помощью MeshFaceMaterial:

var imagePrefix = "images-nissan/pano_"; 
var imageDirections = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; 
var imageSuffix = ".png"; 
var skyGeometry = new THREE.BoxGeometry(1, 1, 1); 
var materialArray = []; 
for (var i = 0; i < 6; i++) { 
    materialArray.push(new THREE.MeshBasicMaterial({ 
     map: THREE.ImageUtils.loadTexture(imagePrefix + imageDirections[i] + imageSuffix), 
     side: THREE.BackSide 
    })); 
} 

var skyMaterial = new THREE.MeshFaceMaterial(materialArray); 
var skyBox = new THREE.Mesh(skyGeometry, skyMaterial); 
skyBox.name = "interiorMesh"; 
scene.add(skyBox); 

Однако, сейчас я хотел бы добавить материал к одной из граней куба и объединить материалы по этой грани куба.

Поэтому в основном я бы один материал на 5 граней и 2 материалов на 1 грань кубы - Я хочу, чтобы наложить, что «оригинальной» текстуры с другим прозрачным PNG, так что покрывает только определенную часть оригинала изображение. Оба изображения имеют одинаковые размеры, только новый один частично прозрачный. Возможно ли это с CubeGeometry? Или мне нужно сделать это с самолетами? Любая помощь очень ценится!

Answer 1

Вы можете точно изменить материал одной из сторон. Однако вы не можете использовать два материала для одного лица.

Я бы рекомендовал создать дополнительную текстуру как комбинацию предыдущих двух, превратив ее в отдельный материал и при необходимости присвоить ее шестой грани куба. Если это возможно, объедините эти изображения заранее в выбранном графическом редакторе. Если вы можете сделать это только во время выполнения, вам придется либо использовать холст, чтобы объединить их, либо шейдер, как рекомендовано @beiller.

Я бы не рекомендовал прозрачные плоскости, прозрачность иногда может быть очень сложной и визуализировать странным образом.

что-то подобное обсуждается здесь - Multiple transparent textures on the same mesh face in Three.js