Threejs don't render shadows from opacity

Questions
,
1

Is there a parameter to correct the image below, threejs don’t seem to render shadow from texture opacity.

snap
snap988×1756 464 KB

Everything are realistic in the project except the shadows

2

I don’t think you can use the textures alpha channel (I could be wrong), but you can use an alpha map and the materials alphaTest property.
I have an example here : Transparent Shadow - Three.js Tutorials (sbcode.net)

image
image839×488 62 KB

3 Likes
3

Simple mesh:

mesh.customDepthMaterial = new THREE.MeshDepthMaterial({
  depthPacking: THREE.RGBADepthPacking,
  map: clothTexture,
   alphaTest: 0.5
});

My instancedBufferGeometry

mesh["instance_grass_long"].customDepthMaterial=new THREE.ShaderMaterial({
uniforms:{
map:{value:tex["grass_long_1"]},
time:{value:0},
},
vertexShader:vs["grass_depth"],
fragmentShader:fs["grass_depth"],
});

image
image768×432 61.5 KB

3 Likes
4

The texture opacity shadow is fixed

Snap20220612062508
Snap20220612062508988×1756 476 KB 

new THREE.TextureLoader( 'leaves.jpg' , function (texture) {
  mesh.material.alphaMap=texture
  mesh.material.alphaTest: 0.5
})

Thanks so much :slight_smile:

2 Likes
5

that solves the problem