access object ref after loaded?

[tendertree]

try to use animejs with moving animation I try to access object by ref

import React, { useEffect, useRef, useState } from 'react'
import {
    Engine,
    Scene,
} from 'react-babylonjs'
import { AbstractMesh, Color3, Mesh, Nullable, Vector3 } from '@babylonjs/core'
import anime from 'animejs'

export function BasicScene() {
    const boxRef = useRef<Mesh>(null);
    const boxMove = () => {
        if (boxRef.current != null) {
            anime({
                targets: [boxRef.current!.rotation],
                y: 1, x: 2, z: 3,
                easing: "easeInOutSine",
                duration: 5000,
                direction: "alternate",
                loop: true
            });
        } else {
            console.log("boxRef.current is null");

        }

    }

    return (
        <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
            <Scene
                autoClear={false}
            >
                <arcRotateCamera
                    name="camera1"
                    target={Vector3.Zero()}
                    alpha={Math.PI / 2}
                    beta={Math.PI / 4}
                    radius={8}
                />
                <hemisphericLight
                    name="light1"
                    intensity={0.7}
                    direction={Vector3.Up()}
                />

                <box
                    name="box"
                    ref={boxRef}
                    size={2}
                    position={Vector3.Zero()}
                    onCreated={boxMove}
                >
                    <standardMaterial
                        name="box-mat"
                        diffuseColor={Color3.Red()}
                        specularColor={Color3.Black()}
                    />
                </box>
            </Scene>
        </Engine>

    )
}

as my expectation, box rotate by access boxRef However even I allocate function in the onCreated it say boxref.current is null

after I changed onReady doesn't work

I found there is onModelLoaded Event but for model not just simple mesh

is there a way to call the function after box was created to access the ref?

[brianzinn]

boxMove will be called before the ref is called. Did you try with a callback on ref or with the parameter passed to onCreated callback? ie:

<box
    ref={(instance) => {
       console.log('ref', instance);
     }}
    onCreated={(instance) => {
        console.log('onCreated', instance);
    }}
>...</box>

I would say this is by design. onCreated is called immediately after it is created and before react sets the ref. ref doesn't callback how you have it - it just sets.

[tendertree]

Thanks! after add callback on ref directly it work out of box :)