Я создаю куб, и я применяю 6 различных текстур к каждому из них. Каждая текстура является .png файлом и содержит прозрачные части. Я также применяю цвет к кубу - я хочу видеть прозрачность прозрачного прозрачного слоя.
Проблема: прозрачность отображается как белый цвет, поэтому я не вижу базовый цвет куба (который делает ok, если я удаляю текстуру png)
Как я могу сделать прозрачность png? Я пробовал играть с некоторыми настройками материала, но ни один из них не стал прозрачным.
Код для создания куба и материалов:
var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];
// create textures array for all cube sides
for (var i = 1; i < 7; i++) {
var img = new Image();
img.src = 'img/s' + i + '.png';
var tex = new THREE.Texture(img);
img.tex = tex;
img.onload = function () {
this.tex.needsUpdate = true;
};
var mat = new THREE.MeshBasicMaterial({color: 0x00ff00, map: tex, transparent: true, overdraw: true });
materials.push(mat);
}
cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);
EDIT:
На рисунке ниже показана проблема: при решении с приставкой левая текстура теперь выглядит нормально - это изображение png без прозрачности - я устанавливаю прозрачность в коде с помощью
materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));
Правильная текстура также является png-изображением - только в том, что она имеет прозрачную область (все, что делает белый, должно быть чисто красным, так как оно прозрачно и должно брать цвет из куба?). Как сделать прозрачную прозрачную часть прозрачной?
