GLTF/GLB animation in React dont' work

Hello!
My gltf or glb model with shape key animation(made in Blender) work perfect in Vanilla js and on babylon sandbox.
Now i want export my project to react , i use code in official documentation:How to use Babylon.js with ReactJS - Babylon.js Documentation

Everything work fine except animation, in inspector i see that everything is fine but the animation is only scale , shape key animation don’t work, everything shrink and go to orginal size. This happen only in react. why this happen?
Thanks for advice!
Edit: In inspector when i click on model and on “Render Overlay” in Outline&Overlay bookmark i see overlay shadow with good animation, and model in the same time just scaling/shrink.

Pinging El Maestro @brianzinn

Can you share some code? Are you using the <model …> component or loading yourself, using hooks - need more information. Can you share model or repo?

Thanks for reply!
I just copy and paste code from documentation, and add only this for test(this code work everywhere)
BABYLON.SceneLoader.ImportMesh("", “/assets/”, “untitled.gltf.glb”, scene, function (mesh) {
});
and animation don’t work,
but I try export model with this example: BabylonJS React Template - CodeSandbox
and animation model works perfect!
But i have another issue, in this example window resize don’t work , i dont know why :frowning:
In code from documentation resize work good but this work on functional component (useEffect),
in code from example resize don’t work and this was create on class component(componentDidMount)

Creator of this example put here shorter version of code. Same problem with resize.

Can you help me with this window resize problem and check his code?
I will be very grateful :smiley:
(sorry for bad english, and code skills :frowning: )

The canvas is rendered with a numeric width and height and that doesn’t look like it is updated. The componentDidMount is the right lifecycle method to add an event listener for the engine, but the canvas isn’t resizing. Probably better to use css width as percent - look at the playground to see or set canvas width in the resize event.

Also, those examples are using the original BabylonJS NPMs - would go for the ES6 versions myself.

You switched to a new question, does that mean you got your model loading? I have put up some samples with glb and React models - if you can share a repo that reproduces your issues then it will be much easier to get help.

I’m on my phone now or could give more insight :slight_smile:

1 Like

I reread you are still having issues with animation. You can enable cors on a site and Your model loads on the playground then it could be with your project setup.

Thank you !
width, height with 100% help in my case.
Animation work perfect now, i have code from example.
Everything works now so thank you again!:smiley:

2 Likes