How to run components in callbacks with Babylonjs + React?

Questions
1

I’m sure this is simple but I’ve searched this forum and the net and can’t figure out how to do this.

I have something like this, which is meant to load the Cybertruck then onLoad create a ground.

            <Cybertruck>
                <Ground name="ground1" width={6} height={6} subdivisions={2} />
            </Cybertruck>

How do I run the child component “Ground” from the Cybertruck onLoad callback?

I tried this but its not correct. I get an error.

class Cybertruck extends React.Component {
    render() {
        return (
            <Model rootUrl={"/assets/Cybertruck/"} position={new Vector3(0, 1, 40)} rotation={new Vector3(0,1.3,0)} scaling={new Vector3(0.5,0.5,0.5)} sceneFilename={"cybertruck.gltf"} pluginExtension=".gltf" onModelLoaded={(model) => {
                this.props.children();
            }
            } onModelError={(error) => console.error('error:', error)} />
        );
    }
}
2

Well this is not how it is working for React.
You first have to render the children of the Cybertruck component inside its render() function. The idea is to have a state {isLoaded: boolean} and this state will command the rendering of the children

Something along these lines:

render() {
        return (
<>
            <Model rootUrl={"/assets/Cybertruck/"} position={new Vector3(0, 1, 40)} rotation={new Vector3(0,1.3,0)} scaling={new Vector3(0.5,0.5,0.5)} sceneFilename={"cybertruck.gltf"} pluginExtension=".gltf" onModelLoaded={(model) => {
                this.props.children();
            }
            } onModelError={(error) => console.error('error:', error)} />
{this.state.isLoaded && this.props.children}
</>
        );
    }

just call this.setState({isLoaded: true}) when the truck is loaded

1 Like
3

It worked! You are a React MASTER!

class Cybertruck extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false
        };
    }    

    render() {        
        return (
            <>
                <Model rootUrl={"/assets/Cybertruck/"} position={new Vector3(0, 1, 40)} rotation={new Vector3(0,1.3,0)} scaling={new Vector3(0.5,0.5,0.5)} sceneFilename={"cybertruck.gltf"} pluginExtension=".gltf" onModelLoaded={(model) => {
                    this.setState({isLoaded: true});
                }
                } onModelError={(error) => console.error('error:', error)} />
                {this.state.isLoaded && this.props.children}
            </>
        );
    }
}
1 Like