threejs設置透明顏色

Question

我希望能夠通過其顏色（在vertColors數組中定義）設置給定的頂點透明度，以便在單個網格上我可以有不同的不透明度區域。

是否有一種簡單的方法可以使所有被定義爲特定顏色的頂點透明？

有一個想法，我有;是否有可能擴展/改變MeshBasicMaterial的着色器以將所有黑色區域定義爲透明？

或者我可以將此材質的輸出傳遞給第二個着色器來做到這一點？

const geometry = new THREE.BufferGeometry(); 

const vertPositions = createVertPositions(); //Float32Array of positions 
const vertColors = createVertColors(); //Float32Array of colors 

geometry.addAttribute('position', new THREE.BufferAttribute(vertPositions, 3)); 
geometry.addAttribute('color', new THREE.BufferAttribute(vertColors, 3)); 

const material = new THREE.MeshBasicMaterial({ 
    transparent: true, 
    opacity: 0.5, 
    side: THREE.BackSide, 
    vertexColors: THREE.VertexColors 
}); 

const mesh = new THREE.Mesh(geometry, material); 

感謝您的任何幫助。

Answer 1

從文檔中可以看出，您可以使用MeshBasicMaterial的.alphaMap屬性來實現您想要的功能。請注意，使用WebGLRenderer，您將使用綠色通道作爲alpha值（RGB）而不是alpha通道。

當您循環創建顏色數組時，您可以同時根據顏色的值生成您的alphaMap數組。然後，您需要將該數組轉換爲紋理並將其分配給.alphaMap屬性。