Not able to render the shadow of the model

Bugs
1

Hi
I was trying to apply shadow to my model, but after using all the methods no shadow got rendered. I tried with a simple isosphere and was able to render its shadow but using the same code, my model was not able to generate the shadow
Please help me with the solution

render() {
    let baseUrl = "http://localhost:3001/assets/";
    var modelScale = 1;
    var modelPosition = new Vector3(0, 0, 0);
    var modelScaling = new Vector3(modelScale, modelScale, modelScale);
    var modelRotation = new Vector3(0, -15, 0);

    return (
        <div style={{ height: '100%', width: '100%' }}>
            <Engine antialias adaptToDeviceRatio canvasId='babylonJS' style={{ height: '100%', width: '100%' }} >
                <Scene canvasId="scene_1" style={{ height: '100%', width: '100%' }} >
                    <ArcRotateCamera name="arc" target={new Vector3(0, 1, 0)} minZ={0.001} alpha={(-Math.PI / 2) + 0.5} beta={(0.5 + (Math.PI / 4))}                             radius={10} lowerBetaLimit={(Math.PI / 2) - 1.5} upperBetaLimit={(Math.PI / 2)}
                        lowerRadiusLimit={5} upperRadiusLimit={15} />

                    <HemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} />
                    <DirectionalLight name="dl" direction={new Vector3(0, -0.5, 0.5)} position={new Vector3(0, 7, 0.5)}>
                        <ShadowGenerator mapSize={1024} useBlurExponentialShadowMap={true} blurKernel={32} shadowCasters={["Bike","counterClockwise"]}/>
                    </DirectionalLight>
 
                    <Model 
                        rotation={modelRotation} position={modelPosition}
                        rootUrl={`${baseUrl}bike/`} sceneFilename="Bike.glb" onModelError={this.onModelError_}
                        onModelLoaded={this.onModelLoaded_} onLoadProgress={this.onLoadProgress_} onCreated={this.onCreated_}
                        scaling={modelScaling} />

                    <IcoSphere name="counterClockwise" position={new Vector3(-0.5, 1, 0)} radius={2} flat={true} subdivisions={1}>
                        <StandardMaterial
                            diffuseColor={Color3.Yellow()}
                            specularColor={Color3.Black()}
                        />
                    </IcoSphere>
                    <EnvironmentHelper options={{ enableGroundShadow: true, groundYBias: 1 }} mainColor={Color3.FromHexString("#74b9ff")} />
                </Scene>
            </Engine>
        </div>
    );
}

}

2

What framework are using to integrate into react?

3

Yes, I am using react.js

4

But what lib do you use to get the Engine or Scene component?

5

I am using react-babylonjs package to build the scene

6

ok pinging @brianzinn

7

You need to know the names of the meshes that the model creates to declaratively assign shadow casters. I added a new option (I think in 2.0.4) that allows you to do the inverse and declare which meshes do not cast shadows. Using the environmentHelper then you would end up with:
<shadowGenerator … shadowCastersExcluding={[‘gazeTracker’, ‘BackgroundHelper’, ‘BackgroundPlane’, ‘BackgroundSkybox’]} />

There is a storybook live demo that does that here:
https://brianzinn.github.io/react-babylonjs/?path=/story/with-vr--simple-vr

If you want to declaratively include instead of exclude then you need to know the names of all of the meshes (ie: open in sandbox or editor and inspect). Another option is to use the useRef hook and you have full access to the shadow generator.

8

Its working by using the mesh name.
Thank you :smile: