Блог

У меня есть компонент с именем, Sticky который обертывает мои react-three-fiber компоненты. Этот компонент предоставляет мне некоторые обновления состояния через обратный вызов, поэтому весь код выглядит следующим образом:

 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>
  );
};
  

Как вы можете видеть, мне нужны данные из Sticky onChange обратного вызова внутри react-three-fiber useFrame перехвата. Я понимаю, как все работает, и что я не хочу передавать это в компонент, поскольку это приведет к повторному отображению Three.js эскиз. Но если я не могу полагаться на props, как вы работаете с внешними данными в react-three-fiber компоненте?

Любая помощь приветствуется.