Activating animations or performing simple animations with a gltfjsx component

Questions
1

Hello,

I’ve loaded a gltf model using R3F, and made it into a jsx component using this tool GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components.

I’m wondering how I can programmatically trigger simple animations such as just translating or rotating the model in a certain way from another component that this one is imported into.

I tried to see if I could forward a ref to the Model component, but it wouldn’t compile.

/Component with the JSX of an imported gltf model---------------------/
export default function Model(props) {
const group = useRef();
const gltf = useLoader(GLTFLoader, powernode);

return (
//long jsx
)

}
/----------------------------------------------------------------------------------------/

/Parent component----------------------------------------------------------------/
import Model from “./model”;

export default function ModelParent() {

//Refs, business logic for triggering animation on the model

return (
Model
)

}

Thank you in advance for any hints or help

2
3

Thank you drcmda you are my hero

4

I have an additional question – in the example you linked, the app.js file does not have imperative control over the animation happening the the model.js file (I believe).

My issue is, I don’t know how many models i’ll have imported into my equivalent of the app.js file – and I’d like to be able to sink refs in them, and play dynamic animations – perhaps as simple as translate along the x-axis some amount of units determined at runtime.

Is this possible? If my animations need to be somewhat dynamic, does that preclude using baked in animations in the .glTF file – then they must be written in JS?

All the best

5

that imo would be the wrong approach, components are inherently prop driven.

<Model play="foo" />

or

const [animation, set] = useState("foo")
return <Model play={animation} />

reaching into the via ref is certainly possible, use useImperativeHandle for that, but wouldn’t make much sense to me, it only complicates matters that are probably quite easy.

6

Ahhh alright – I have to admit to being slightly in over my head with this, you’ve been a tremendous help and I’ll understand if you can’t spoonfeed me everything.

So I could create different animation data dynamically inside my parent component, and then pass it down to the model.js as a prop, and it would re-render and play?

This code would automatically trigger an animation described within the model component called “foo” the moment it renders?

<Model play="foo" />