three.js之Three.js png纹理-Alpha渲染为白色而不是透明

我正在创建一个多维数据集，并将6种不同的纹理应用于每个面。每个纹理都是一个.png文件，并包含透明部分。我还在立方体上应用了一种颜色-我想看到该颜色通过png透明。

问题:透明度呈现为白色，因此我看不到立方体的底色(如果删除png纹理，则呈现为正常)

如何使png透明度起作用？我尝试了一些 Material 设置，但没有一个使它透明。

用于创建多维数据集和 Material 的代码:

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

编辑:

下图显示了该问题-使用sendhanal解决方案时，左侧纹理现在可以正常显示-这是没有透明度的png图像-我在代码中设置了透明度

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

正确的纹理也是png图像-仅它具有透明区域(所有呈现白色的应该是纯红色，因为它是透明的并且应该从立方体中获取颜色？)。如何使白色部分透明？

请您参考如下方法:

Material 的不透明度属性为您解决了问题。遵循示例代码片段:

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