mrdoob/three.js — Issue #862: Cube or Plane inside sphere not rendering correctly
Author: yomer
Created: 2011-12-07 05:07:08+00:00
State: open

Hi, I have sort of a problem in which I have a sphere textured with a PNG image which is half transparent, and half painted. The effect I get is a half sphere that you can see inside when rotated to see the backside.

I'm trying to add a plane or "flat cube" geometry which is covered with a square png with an image. The image has alpha and it should be rendered to show the item accordingly.

The end result is that when I turn the sphere around, I can see that my plane is rendering inside the sphere, but then part of the sphere is rendered transparent where the plane's alpha is the only one supposed to be transparent ,and I can see the background.

I've read and tried several solutions on several published issues here, but I can't fix the problem. I've tried depthTest: false, adding the sphere before and after the plane, setting different values of transparency. I've also tried the additiveblending, setting sphere.flipSided to true or false, and am inclined to try the setting of the background to black for my PNG, but how can I do that if some of the PNGs I'm trying to use contain the black color.

I would really appreciate anyone's help. I can post a picture later tonight. At the moment, I can share these code extracts:

*this is my cube/plane texture
imgPremios[4] = new materialClass({map: THREE.ImageUtils.loadTexture('img/premios/5.png'), transparent: true});

*this is my sphere texture
matEsferaActiva[4] = new materialClass({map: THREE.ImageUtils.loadTexture('img/esferas/esfera5act.png') , transparent: true, opacity: 1});
matEsferaInactiva[4] = new materialClass({map: THREE.ImageUtils.loadTexture('img/esferas/esfera5.png') , transparent: true, opacity: 1});

*and this is where I add the objects to the scene
for (var i = 0; i < 7; i++){
objects[i] = new THREE.Mesh( new THREE.SphereGeometry(72, 64, 64), matEsferaActiva[i] ); //(72,20,20)
objects[i].position.x = posEsferas[i][0];
objects[i].position.y = posEsferas[i][1];
objects[i].position.z = 20;
if (i >= 2 && i <= 4){
objects[i].rotation.x = -.1
}
if (i >= 5 && i <= 6){
objects[i].rotation.x = -.25
}
objects[i].overdraw = true;
objects[i].doubleSided = true;
objects[i].flipSided = true;
objects[i].name = (i+1);

premios[i] = new THREE.Mesh( new THREE.CubeGeometry(100,100,0,1), imgPremios[i+adendo]);
premios[i].overdraw = true;
premios[i].position.x = posEsferas[i][0];
premios[i].position.y = posEsferas[i][1];
premios[i].position.z = 20;
premios[i].name = (i+adendo);
scene.addChild(premios[i]);
scene.addChild(objects[i]);

}