I have a component called Sticky that wraps my react-three-fiber components. This component gives me some state updates through a callback, so the whole code looks like this:
const Box = props => {
useFrame(() => {
// I need the Sticky state update here!
});
return (
<mesh {...props}>
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
<meshStandardMaterial
attach="material"
color={"orange"}
/>
</mesh>
);
};
const Main = () => {
const onChange = state => {
console.log('NEW STATE', state);
};
return (
<Sticky onChange={onChange}
<Canvas>
<Box position={[-1.2, 0, 0]} />
</Canvas>
</Sticky>
);
};
As you can see, I need the data from the Sticky onChange callback inside the react-three-fiber useFrame hook. I understand how everything works and that I don't want to pass it into the component as this will rerender the Three.js sketch. But if I can't rely on props, how do you work with external data in a react-three-fiber component?
Any help appreciated.