Sie können THREE.ShaderMaterial
mit einem benutzerdefinierten Vertex-Attribut für den Alpha-Wert verwenden. Hier ist eine Schritt-für-Schritt-Anleitung -
1) In Ihrem Vertex-Shader, deklarieren Sie eine attribute float
, die den Alpha-Wert übernehmen wird. Deklarieren Sie auch einen varying float
im Vertex- und im Fragment-Shader.
Vertex-Shader:
attribute float alphaValue;
varying float vAlphaValue;
Fragment-Shader:
varying float vAlphaValue;
2) Zuweisen des alpha-Attributwert zu dem variierenden Wert in Vertex-Shader.
Vertex-Shader:
vAlphaValue = alphaValue;
3) Schließlich die Berechnung durchgeführt wurde, weisen die alpha unterschiedlichen Wert auf den Alpha-Wert von gl_FragColor.
Fragment-Shader:
gl_FragColor.a = vAlphaValue;
4) Aus der Host-Seite, ein Array mit der Länge des gesamten Scheitel hinzuzufügen. Hier ist der Code-Beispiel -
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
var alphaArray = [];
var alphaArrayLength = vertices.length/3;
for(var i = 0; i < alphaArrayLength; i++) {
alphaArray.push(0.5);
}
5) Fügen Sie ein benutzerdefiniertes Attribut für Alpha-Wert in der Geometrie und aktualisieren Sie es mit dem Array erstellt -
geometry.addAttribute('alphaValue', new THREE.BufferAttribute(new Float32Array(alphaArray), 1));
6) Erstellen Sie ein THREE.ShaderMaterial -
var material = new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
side: THREE.DoubleSide,
transparent: true,
vertexShader: document.
getElementById('vertex_shader_for_face').text,
fragmentShader: document.
getElementById('fragment_shader_for_face').text
});
7) erstellen Sie die Masche mit der Geometrie und Material -
var mesh = new THREE.Mesh(geometry, material);