Three.js png texture - renderowanie alfa jako białe zamiast przezroczystego

Question

Tworzę sześcian i stosuję 6 różnych tekstur na każdej z jego twarzy. Każda tekstura jest plikiem .png i zawiera przezroczyste części. Stosuję również kolor do sześcianu - chcę zobaczyć tę przezroczystość koloru korytka png.

Problem: Przejrzystość renderuje jako białego koloru, więc nie mogę zobaczyć kolor bazowy sześcianu (który renderuje ok jeśli usunąć tekstury PNG)

Jak mogę uczynić PNG pracy przezroczystości? Próbowałem grać z niektórymi ustawieniami materiału, ale żaden nie uczynił go przezroczystym.

Kod do tworzenia kostkę i materiały:

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:

Obrazek poniżej przedstawia problem - roztworem senthanal lewej tekstury teraz czyni ok - to png obraz bez przezroczystości - ustawiam przezroczystość w kodzie za pomocą

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

Prawa tekstura jest również obrazem png - tylko że ma przezroczysty obszar (wszystko, co powoduje, że biały powinien być czysty czerwony, ponieważ jest przezroczysty i powinien zabrać kolor z kostki?). Jak mogę uczynić tę białą część przezroczystą?

Answer 1

atrybut krycie materiału nie trick dla Ciebie. Wynika z tego, przykład fragment kodu:

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 Kluczem jest ustalenie przejrzystego atrybut prawdziwego i ustawić krycie do 0.5 (na przykład). Dodaj drugi sześcian, który pasuje dokładnie do środka bez przejrzystości, pomysł z @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);