Best way of using external data with useFrame in react-three-fiber

Viewed 347

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.

0 Answers
Related