Translucent Material for shadows

Questions
, , ,
1

I have a mesh which has a geometry and a material - below is the material am using

new MeshPhysicalMaterial({
        metalness: 0, roughness: 0.1, transmission: 1, thickness: 0.8, reflectivity: 1,})

I had a light source i.e. directional Light infront of it which is casting shadows on the mesh. on the floor, this complete glass mesh along with the frame of this window is completely blocking the light and not allowing it to pass. I wanted it to actually pass the light and work like a real window by casting shadow of only the opaque frame of the window.
As the sun’s position is continously changing - can’t rely on making the shadows a mesh that will be placed as a fake shadow.

Kindly help out with this one.
Thankyou in advance.

2

Would it help to remove the glass?

Otherwise I believe you need to create the glass as a separate mesh/object and set the glass material to transparent = yes , opacity 0.

3

A simple way is to have something like this:

frameMesh.castShadow = true;
glassMesh.castShadow = false;

This makes the glass shadowless like this:

image
image1077Ă—607 78.7 KB

Yeah, absolutely

3 Likes
4

Haven’t thought of this idea or toggling castShadow as false. This could be a solution, but i read some posts related to these only - which had something like - alphaMap attached on it and used alphaTest to let the light pass through it. I don’t have an alphaMap of the mesh - is there a way of solving this with this scenario ?

5

i think it won’t coz the mesh of the frame and the glass is combined.

6

As far as I know alpha tests work with alpha maps. They are just a threshold determining what alpha map values are considered fully transparent. Maybe these posts (or their authors) could provide more info how to use alpha tests without their maps?

7

I would really consider keeping meshes with transparent materials separate from other meshes.

I re-learned this just recently when I was attempting to create trees with transparent leaves, a solid trunk and a transparent shadow. I initially combined the transparent shadow with the trunk first and had problems with the shadows peeking through the leaves on lines of trees. Then I combined the transparent shadow with the transparent leaves first and the problems mostly went away. You can see the result here.

If you are using Blender, you can create two sets of meshes. Then in three.js, parse the imported gltf/glb file and do as Pavel suggested above. That’s how I stopped transparent propellers from casting a shadow. You could also apply other modifiers separately to your transparent mesh.

As an example, this model has several transparent meshes. I parse the glb file and find the transparent meshes by name and I set them to not receive or cast shadows. I gave the glass a bit of a tint, so it does not disappear completely.