noclipper
commented
2 years ago I think this was a noob inquiry, but I figured I'd put the solution here for another noob that ran into this:
Basically, I used forwardedRef instead of ref on the <JsxComponent/>, then on the actually Scene.js file, I added in forwardedRef as a parameter in the react component, and changed the ref={forwardedRef}, then make sure you make the prior:
const group = useRef()
to now be
const group = forwardedRef
Now I am able to create animations of multiple GLTF->JSX components, all from a central place, by using the refs.
When creating a JSX from a GLTF, there is a:
const group = useRef()This ref value is used commonly w/ gsap to do animations. If I import my JSX component into another layout, how do I access this useRef value? (group)
Right now doing a reference to the JSX component:
<JSXComponent ref={thisRefWontWork}/>I will get undefined. How am I able to access the contents of the original 'group' ref from outside of its component, when imported as a react functional component?