Ground with shadow, but with the same color of the background(scene)


I am trying to set a shadow for a product on a ground, but with the same color of the scene. The thing is that if I try to add shadow with lighting, because of the light, the ground color… hmm… well, not the color itself changes, but it appears brighter, therefore, it becomes visible as it appears to be different color from the scene background color.

This is what I would like to achieve.

to have shadows, there must be lighting, but if I set disableLighting = true, it gets rid of the shadow too.

Here is my sample on PlayGround.

Does anyone know how I can set the ground color same as the scene’s, but still somehow maintain the color?

Thanks!! Have fun coding with Babylon!! :smiley:

I found this thread that might be what you’re looking for!:slight_smile:

1 Like

Shadow Only Material should do the trick.

1 Like

@msDestiny14 @inteja

This Shadow Only Material seems like a perfect and easy solution!!

However, in my react project, I keep getting an error message: 'ShadowOnlyMaterial' is not defined no-undef

If I try to import ShadowOnlyMaterial, I get this error message: Attempted import error: 'ShadowOnlyMaterial' is not exported from '@babylonjs/core'.

I am using and following the React Babylon sample on Documentation page.

based on npm install @babylonjs/core

Do you, by any chance, know how I can import ShadowOnlyMaterial for my react project?

Thank you!!

npm install @babylonjs/materials

then …

import { ShadowOnlyMaterial } from "@babylonjs/materials/shadowOnly";

1 Like

Ah, I thought no more install was needed…

I had to add excludeMeshes for some extra lightings I had, but it works great now!!

Thanks a lot!! :smiley:

Here is the final solution