It seems like achieving this out of the box may not be possible.
One workaround to accomplish a similar result as the useThree example is by storing the controls ref in a Context. This way, you can access it by consuming that Context in any descendant component within the tree.
Here's an example (please note that this code has not been tested):
const ControlsContext = createContext()
const ControlsContainer = ({ children }) => {
const controls = useRef()
return (
<ControlsContext.Provider value={{ controls: controls.current }}>
<orbitControls ref={controls} />
{children}
</ControlsContext.Provider>
)
}
const YourComponent = () => {
const { controls } = useContext(ControlsContext)
// Perform necessary actions, but ensure to validate if it's defined
}
const App = () => (
<ControlsContainer>
<YourComponent />
</ControlsContainer>
)
However, using this approach may not be considered best practice. It's advisable to keep all control-related code within a single component. If there's a need to share it with another component, you can simply pass it down as a prop.