shadowCaster not getting updated with new mesh array

Hi

I am trying to update the shadowCaster array with list of meshes using the setState function but new values are not rendered in the shadowCaster Array
Please help me with the solution

I am using react-babylon.js

constructor(props) {
    super(props)
    this.state = {
        meshes: [],
        name: ""
    }
    this.onModelLoaded = this.onModelLoaded.bind(this);
}
onModelLoaded(model) {
    alert("onModelLoaded");
    let newMeshes2 = this.state.meshes
    for (let i = 1; i < model.meshes.length; i++) {
        let name = model.meshes[i].name;
        newMeshes2.push(name);
    }
    this.setState({
        meshes: newMeshes2
    }, () => {
        console.log('check here', this.state.meshes)
    })
};
render() {
    let baseUrl = "http://localhost:3000/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);
    const SkyboxScenes = [{
        name: 'road',
        texture: `http://localhost:3000/assets/textures/SpecularHDR.dds`
    }]
    var model_bike_template = <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} />;
    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} />
                    {/* <Skybox rootUrl={SkyboxScenes[0].texture} /> */}
                    <HemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} />
                    <EnvironmentHelper options={{ enableGroundShadow: true, groundYBias: 1 }} mainColor={Color3.FromHexString("#74b9ff")} />
                    <DirectionalLight name="dl" direction={new Vector3(0, -0.5, 0.5)} position={new Vector3(0, 7, 0.5)}>
                    </DirectionalLight>
                    {model_bike_template}
                </Scene>
            </Engine>
        </div>
    );
}
1 Like

Ping @brianzinn as I think he is the react-babylon daddy :slight_smile:

OK. I see what you are trying to do. I think you forgot to include the shadow caster, but I imagine you have a prop assigned like

<... shadowCasters={state.meshes} />

Those state changes aren’t being picked up right now. I guess I wrote that quickly to get a declarative version up and running, but can add way to pick up on those. You can get around it by versioning the shadowCaster with a unique key.
<… key={state.uniqueId} … />

That will dispose the shadow caster and attach a new one to the light. In the meantime I will fix that after I get done with the work I am doing this week on integration animations.

1 Like