three.js: Schatten von teilweise transparentem Mesh

Question

Ich habe ein Modell mit einer Textur, und die Textur ist in einigen Bereichen transparent (Alpha ist Null).

Wenn das Modell jedoch einen Schatten wirft, erscheint der Schatten so, als ob das Modell fest wäre.

Wie kann ich das beheben?

Answer 1

Wenn Sie in threw.js Schatten werfen, werden die Maschen vom Standpunkt des Lichts als fest betrachtet.

Wenn Ihr Netz jedoch eine transparente Textur oder eine Alpha-Map aufweist, können Sie geeignete Schatten erzielen, indem Sie CustomDepthMaterial für das Netz angeben.

Es gibt mehrere Möglichkeiten, dies zu tun. Ein Weg ist über eine benutzerdefinierte ShaderMaterial. Es gibt ein Beispiel für diesen Ansatz in this three.js example.

Für einfachere Szenen ist es ausreichend, dieses Muster zu verwenden:

var customDepthMaterial = new THREE.MeshDepthMaterial({ 

    depthPacking: THREE.RGBADepthPacking, 

    map: myTexture, // or, alphaMap: myAlphaMap 

    alphaTest: 0.5 

}); 

mesh.customDepthMaterial = customDepthMaterial; 

three.js r.85