Текстура tr.js png - альфа визуализирует как белый вместо прозрачности

Я создаю куб, и я применяю 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-изображением - только в том, что она имеет прозрачную область (все, что делает белый, должно быть чисто красным, так как оно прозрачно и должно брать цвет из куба?). Как сделать прозрачную прозрачную часть прозрачной?

enter image description here

Ответы

Ответ 1

атрибут непрозрачности материала делает трюк для вас. Выполняется, пример фрагмента кода:

var materialArray = [];
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 }));
var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);
scene.add( MovingCube );

http://threejs.org/docs/#Reference/Materials/Material Ключ должен установить прозрачный атрибут true и установить непрозрачность до 0,5 (например). Добавьте второй куб, который вписывается внутри точно без прозрачности, идея из @WestLangley (рендеринг и прозрачность холста Three.js)

backCube = new THREE.Mesh( MovingCubeGeom, new THREE.MeshBasicMaterial( { color: 0xFF0000 }) );
backCube.position.set(0, 25.1, 0);
backCube.scale.set( 0.99, 0.99, 0.99 );
scene.add( backCube );