Error: R3F: Hooks can only be used within the Canvas component!

Ryan Parker answered on February 17, 2023 Popularity 8/10 Helpfulness 5/10

answer Error: R3F: Hooks can only be used within the Canvas component!

Error: R3F: Hooks can only be used within the Canvas component!

Comment

The mesh that the useFrame operates on needs to be a direct child of the component with the Canvas element.

Move the mesh into its own function and then pass it into the Canvas component.

const MyMesh = () => {
  const refMesh = useRef();

  useFrame(() => {
    if(refMesh.current) {
      // rotates the object
      refMesh.current.rotate.x += 0.01;
    }
  });
  return (<mesh ref={refMesh} />);
}

export default () => (
  <Canvas>
    <MyMesh />
  </Canvas>

)

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: canvas javascript

Link to this answer
Share Copy Link