CODEWITHSUNDEEP
three.jswebgl
Rui d'Orey
Rui d'Orey

Reputation: 1022

three.js MultiMaterial opacity depth order

I'm doing a squash game with three.js and I'm adding the player model loaded through a collada file.

I need the player model to be relatively transparent so that the ball and other elements can be seen even if under the object.

I iterate through all the materials of the object's MultiMaterial and set them transparent and with opacity value 0.7.

However, when I do this, as the model has several components, I can see the eyes, mouth, etc. as seen in this picture:

Example

Code:

var loader2 = new THREE.ColladaLoader();
loader2.load("./squash/player/wip2.dae", function(collada) {

  collada.scene.traverse(function(child) {

    if (child instanceof THREE.SkinnedMesh) {

        for (var i = 0; i < child.material.materials.length; i++) {

            var m = child.material.materials[i];
            m.skinning = true;

            m.transparent = true;
            m.opacity = 0.7;              //here

        }

        child.material.skinning = true;

        player = child;

        player.castShadow = true;
        player.receiveShadow = true;

        scene.add(player);

    }

});

});

Live example - http://eqstest.ruidorey.webfactional.com/tennis.html

How can I do to make the occluded parts of the player model to be hidden so I don't see the eyes, mouth, head when for example the hair is on top of them?

Upvotes: 1

Views: 546

Answers (1)

WestLangley
WestLangley

Reputation: 104833

You will have to render your player twice.

In the first render of your player, for each material in your materials array, set material.colorWrite = false;. This will render to the depth buffer only.

Then render your player a second time as usual with material.colorWrite = true;

three.js r.73

Upvotes: 1

Related Questions