threejs set transparent color

Question

Ich möchte in der Lage sein, eine gegebene Vertices-Transparenz anhand ihrer Farbe (definiert im vertColors-Array) so zu setzen, dass auf einem einzelnen Mesh Bereiche unterschiedlicher Opazität erscheinen können.

Gibt es eine einfache Möglichkeit, alle Scheitelpunkte, die als eine bestimmte Farbe definiert sind, transparent zu machen?

Ein Gedanke, den ich hatte; Wäre es möglich, den Shader von MeshBasicMaterial zu erweitern/zu ändern, um alle schwarzen Bereiche als transparent zu definieren?

Kann ich alternativ die Ausgabe dieses Materials in einen zweiten Shader übergeben?

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); 

Danke für jede Hilfe.

Answer 1

Es scheint aus der Dokumentation, dass Sie die .alphaMap Eigenschaft der MeshBasicMaterial verwenden können, um das zu erreichen, was Sie tun möchten. Beachten Sie, dass Sie mit dem WebGLRenderer den grünen Kanal als Alpha-Wert (RGB) anstelle des Alpha-Kanals verwenden.

Während Sie eine Schleife erstellen, um Ihr Farb-Array zu erstellen, können Sie gleichzeitig Ihr AlphaMap-Array abhängig von den Werten Ihrer Farben erstellen. Dann müssen Sie dieses Array in eine Textur umwandeln und es der Eigenschaft .alphaMap zuweisen.