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号