Threejs don't render shadows from opacity

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

Everything are realistic in the metaverse project except the shadows

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)

3 Likes

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"],
});

3 Likes

The texture opacity shadow is fixed

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

Thanks so much :slight_smile:

1 Like

that solves the problem