Three.js png texture - les rendus alpha sont blancs au lieu de transparents
Je suis de la création d'un cube et je demande 6 textures différentes pour chacun de ses visages. Chaque texture est un .fichier png et contient les parties transparentes. Je suis aussi d'appliquer une couleur au cube - je veux voir que les couleurs creux de transparence png.
Problème: la Transparence rend le blanc comme couleur donc je ne peut pas voir la couleur de base du cube (ce qui rend ok, si je retire la png texture)
Comment puis-je faire la transparence png travail? J'ai essayé de jouer avec certains paramètres du matériau, mais aucun de le rendre transparent.
De Code pour créer le cube et matériaux:
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:
Image ci-dessous montre le problème avec senthanal solution la gauche de la texture rend maintenant ok - c'est une image png sans transparence - je régler la transparence dans le code avec
materialArray.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 }));
La bonne texture est aussi une image png - seulement qu'il a une zone transparente (tout ce qui rend le blanc doit être rouge pur, car il est transparent, et devrait prendre la couleur du cube?). Comment puis-je faire partie blanche transparente?
source d'informationauteur easwee
Vous devez vous connecter pour publier un commentaire.
l'opacité de l'attribut de la matière ne l'astuce pour vous. Suit, exemple d'extrait de code:
http://threejs.org/docs/#Reference/Materials/Material La clé est de mettre en transparent attribut vrai et réglez l'opacité à 0,5(par exemple).
Ajouter les deuxième, le cube s'adapte à l'intérieur exactement avec aucune transparence, l'idée de @WestLangley ( Three.js toile de rendu et de transparence )