three.js MultiMaterial opacity depth order

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

我該怎麼做才能使遮擋部分Ø f玩家模型爲隱藏所以我沒有看到眼睛，嘴巴，頭部，例如頭髮是否在他們上面？

Answer 1

你將不得不渲染你的播放器兩次。

在播放器的第一個渲染中，對於材質數組中的每種材質，請設置material.colorWrite = false;。這隻會渲染到深度緩衝區。

然後使您的播放器第二次像往常一樣material.colorWrite = true;

three.js所r.73