Three.js png texture - alfa rende come nero anziché trasparente

Question

Sto creando un cubo e fare domanda 6 trame diverse per ognuno di esso è volti. Ogni texture è un file .png e contiene parti trasparenti. Sto anche applicando un colore al cubo - Voglio vedere quel colore attraverso la trasparenza png.

Problema: La trasparenza rende come colore bianco, quindi non posso vedere il colore di base del cubo (che rende ok se mi tolgo la tessitura png)

Come posso far funzionare la trasparenza PNG? Ho provato a giocare con alcune impostazioni del materiale ma nessuna la rende trasparente.

codice per la creazione del cubo e materiali:

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:

immagine qui sotto mostra il problema - con la soluzione senthanal la texture sinistra ora rende ok - si tratta di una png immagine senza trasparenza - Ho impostato la trasparenza nel codice con

materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 })); 

La texture corretta è anche un'immagine png - solo che ha un'area trasparente (tutto ciò che rende il bianco dovrebbe essere rosso puro poiché è trasparente e dovrebbe prendere il colore dal cubo?). Come posso rendere trasparente quella parte bianca?

Answer 1

l'attributo opacità del materiale fa il trucco per voi. Segue, codice frammento di esempio:

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 La chiave è di impostare trasparente attributo true e impostare l'opacità a 0,5 (per esempio). Aggiungere il secondo cubo, che si inserisce all'interno esattamente senza alcuna trasparenza, idea da @WestLangley (Three.js canvas render and transparency)

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