如何渲染部分半透明的網格？

Question

我遇到的問題是當我有一個網格，其中只有網格的一些面應該是半透明的，而對象的其餘部分應該是不透明的。任何人都知道我應該如何解決這個問題？

下面是對這個問題的更多描述：清晰度：在我們的瀏覽器中，如果它們具有相同的材質屬性，我們會合並多個網格物體。

然後，如果用戶點擊合併對象，我們會發現被點擊的表面和該面部對象的原始ID。然後，我們只用我們自己的自定義着色器突出顯示該對象的面部。

一個對象選擇

現在的問題是，如果我們使材料透明的（因此所選擇的部分是半透明的），則整個合併的網格是透明的，該模型的不透明部分被呈現透明。

你可以看到一些視覺問題，在這樣的畫面：

視覺問題的部分透明的對象

我對我們如何能夠解決這個問題，但他們都將增加存儲多思路消耗和複雜度：

1. 丟棄應該是透明的碎片，然後用選定的面和透明材質創建一個新的網格。

2. 創建一個透明的整個合併網格的副本，然後只渲染透明對象中的選定對象面並丟棄原始非透明網格中的片段。

任何人都有更好的主意嗎？

使用三個r84。

Answer 1

我不明白爲什麼你不想使用分離的盒子網格，因爲它更容易管理每個網格的透明度。

但是，如果你想使用單一的幾何，我想出了一種使用兩種材料，.materialIndex和動態幾何的方法。該方法依賴於this SO answer。

var materials = [ 
    new THREE.MeshLambertMaterial({ color: "white" }), 
    new THREE.MeshLambertMaterial({ color: "white", transparent: true, opacity: 0.5}) 
]; 

. . . 

var cloneGeom = new THREE.Geometry(); 

var oldBoxIndex = 0; 

function setBoxTransparent(boxIndex) { 
    cloneGeom = mesh.geometry.clone(); 
    setBoxMaterial(oldBoxIndex, 0); 
    setBoxMaterial(boxIndex, 1); 
    mesh.geometry.dispose(); 
    mesh.geometry = cloneGeom; 
    oldBoxIndex = boxIndex; 
} 

function setBoxMaterial(boxIndex, materialIndex) { 
    for (let i = 0; i < 12; i++) { 
    cloneGeom.faces[12 * boxIndex + i].materialIndex = materialIndex; 
    } 
} 

jsfiddle例子r87。