Three.js png纹理 - alpha呈现为白色而不是透明

Question

我创建了一个多维数据集，并将6种不同的纹理应用到它的每个表面。每个纹理都是.png文件并包含透明部分。我也将颜色应用于多维数据集 - 我希望看到颜色槽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); 

---

编辑：下面

图为问题 - 与senthanal解左质地现在呈现OK - 这是一个png没有透明度的图像 - 我在代码中设置透明度

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

正确的纹理也是一个PNG图像 - 只是它有一个透明的区域（所有呈现白色应该是纯红色，因为它是透明的，应该从立方体的颜色？）。我怎样才能使这个白色部分透明？

Answer 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的关键是要透明属性真，并设置不透明度设定为0.5（例如）。 添加第二个它完全适合里面没有透明度，创意来自@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);