Search code examples
three.jstracetransparent

three.js transparent material: object not always transparent

I use Three.js to object viewing and picking and i have a visibility problem

I load a collada object in three.js My collada loader is just a little different from the one the repo. I added 

function copyMaterial (_material) {
    var newMaterial = new THREE.MeshLambertMaterial();
    for (var p in _material) {
        if (_material.hasOwnProperty(p) && p !== "id") {
            var obj = _material[p];
            newMaterial[p] = obj;
        }
    }
    return newMaterial;
}

and when loading a material i just copy it before assigning it

This allows me to change the opacity of every object separately, even if they use the same collada material.

This works great. Now by doing so i now see some strange behaviors. Depending on the orientation of my object , some part appears through transparency or not. Screenshots will explain better,

we dont see the internal parts

we see the internal parts

Any idea on what s happening and how to solve it?

Thanks

Solution

  • As far as I know, this happens in 2 occasions:

    1) When you have more than 1 facet set on the same position and the one is visible and the other is not. So at render time, it depends on camera angle which faces to render first.

    2) When you generally try to set transparent all parts of your object, but still want to be able to see some faces through other ones. Again, this is just how the renderer works.

    Now, the only solution I’ve found is to assign FrondSide and BackSide to separate materials and set them both to the same object (part of your object, I guess):

    texture = new THREE.Texture(textureImage);
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true,
    side: THREE.BackSide
 }); 
material2 = new THREE.MeshBasicMaterial({
    map: texture,
    transparent: true
});
geometry = new THREE.SphereGeometry(RADIUS, 40, 20);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh = new THREE.Mesh(geometry, material2);
scene.add(mesh);

    https://github.com/mrdoob/three.js/issues/2476 for more info on the issue