Get OrbitControls ref

Questions
#1

I am trying to get the ref for OrbitControls however it only appears when changing the code, not when loading the page.

const controlsRef = useRef<any>();
console.log(controlsRef);
...
<OrbitControls makeDefault ref={controlsRef} />

After loading the page, no ref is defined. However, after the page loaded, I change the code then ref appears.

Thanks

#2

Found a hint hehe (What would be the ref type for components like Orbit-control · Issue #718 · pmndrs/drei · GitHub). Cant get ref from outside Canvas.

For now, add a wrapper over OrbitControls to capture the ref. Not sure if any better solution or not.

const MyControls = (props: any) => {
  const { setControls } = props;
  const ref = useRef<any>();

  useEffect(() => {
    if (!ref.current) return;
    setControls(ref.current);
  }, ref.current);
  return <OrbitControls makeDefault ref={ref} />;
};