three.js MultiMaterial不透明度深度顺序

Question

我正在用three.js进行壁球比赛，并且我添加了通过collada文件加载的玩家模型。

我需要玩家模型相对透明，以便即使在对象下也可以看到球和其他元素。

我遍历对象MultiMaterial的所有材质并将它们设置为透明且不透明度值为0.7。

然而，当我这样做时，由于模型有几个组件，我可以看到眼睛，嘴巴等，如图所示：

代码：

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);

    }

});

});

直播示例 - http://eqstest.ruidorey.webfactional.com/tennis.html

如何让播放器模型的遮挡部分 隐藏，这样我就不会看到眼睛，嘴巴，头部等等头发在它们上面？

Answer 1

你必须两次渲染你的玩家。

在播放器的第一个渲染中，对于材质数组中的每个材质，设置material.colorWrite = false;。这将仅渲染到深度缓冲区。

然后像往常一样material.colorWrite = true;

再次渲染你的播放器

three.js r.73