three.js : 부분적으로 투명한 메쉬로 캐스팅 된 그림자

Question

텍스처가있는 모델을 가지고 있으며 텍스처가 일부 영역에서 투명합니다 (알파는 0 임).

그러나 모델이 그림자를 투영 할 때 그림자는 모델이 솔리드 인 것처럼 나타납니다.

어떻게 해결할 수 있습니까?

Answer 1

그림자를 three.js로 캐스팅 할 때 메쉬는 빛의 관점에서 보면 단색으로 처리됩니다.

그러나 메쉬에 투명한 텍스처 또는 알파 맵이있는 경우 메쉬에 CustomDepthMaterial을 지정하여 적절한 그림자를 얻을 수 있습니다.

여러 가지 방법이 있습니다. 한 가지 방법은 맞춤 ShaderMaterial입니다. this three.js example에 그 접근법의 예가 있습니다.

var customDepthMaterial = new THREE.MeshDepthMaterial({ 

    depthPacking: THREE.RGBADepthPacking, 

    map: myTexture, // or, alphaMap: myAlphaMap 

    alphaTest: 0.5 

}); 

mesh.customDepthMaterial = customDepthMaterial; 

three.js를 r.85