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

您必须渲染播放器两次。

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

然后使用 material.colorWrite = true;

像往常一样第二次渲染您的播放器

three.js r.73

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

three.js MultiMaterial opacity depth order

webgl

three.js