three.js - textureloader - three js texture
Textura de Three.js png: el alfa se vuelve blanco en lugar de transparente (1)
Estoy creando un cubo y aplico 6 texturas diferentes a cada una de sus caras. Cada textura es un archivo .png y contiene partes transparentes. También estoy aplicando un color al cubo: quiero ver ese color a través de la transparencia png.
Problema: la transparencia se procesa como un color blanco, por lo que no puedo ver el color base del cubo (que se reproduce bien si elimino la textura png)
¿Cómo puedo hacer que la transparencia png funcione? Intenté jugar con algunos ajustes de material, pero ninguno lo hace transparente.
Código para la creación del cubo y materiales:
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);
EDITAR:
La imagen de abajo muestra el problema: con la solución senthanal, la textura de la izquierda ahora se muestra bien, es una imagen de png sin transparencia. Puse la transparencia en el código con
materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture(''img/s2.png''), transparent: true, opacity: 0.9, color: 0xFF0000 }));
La textura correcta también es una imagen png, solo que tiene un área transparente (¿todo lo que se vuelve blanco debe ser rojo puro, ya que es transparente y debería tomar el color del cubo?). ¿Cómo puedo hacer esa parte blanca transparente?
El atributo de opacidad del material hace el truco por ti. A continuación, un fragmento de código de ejemplo:
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 clave es establecer el atributo transparente verdadero y establecer la opacidad en 0,5 (por ejemplo). Agregue el segundo cubo que encaja exactamente dentro sin transparencia, idea de @WestLangley ( render de lienzo de Three.js y transparencia )
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 );