CODEWITHSUNDEEP
javascriptreactjsreact-three-fiber
ioanna marinou
ioanna marinou

Reputation: 71

Error R3F hooks can only be used within the Canvas component! UseTHREE function

I'm trying to mane a cube rotate according to mouse movement and even though <My rotating box is a child of canvas I keed getting: Error R3F hooks can only be used within the Canvas component! And its probably caused by the useTHREE function because when I remove it the error disappears

import { Canvas, useFrame } from "react-three-fiber";
import "./styles.css";
import { useThree } from "@react-three/fiber";

const MyRotatingBox = (props) => {
  
  const mouse = useThree((state) => state.mouse)
  const myMesh = React.useRef();

  const [onHover, setOnHover] = useState(false);
  useFrame(({ clock }) => {
    
    if (onHover) {
      
      myMesh.current.rotation.x += props.mouse.movementX * 0.1;
    }
  });

  return (
    <mesh
      ref={myMesh}
      onPointerOver={(e) => setOnHover(true)}
      onPointerOut={(e) => setOnHover(false)}
    >
      <boxBufferGeometry />
      <meshPhongMaterial color="royalblue" />
    </mesh>
  );
}

export default function App() {
  return (
    <div className="App">
      <Canvas>
        <MyRotatingBox />
        <ambientLight intensity={0.1} />
        <directionalLight />
      </Canvas>
    </div>
  );
}

Upvotes: 1

Views: 2380

Answers (1)

hpalu
hpalu

Reputation: 1435

You are mixing namespaces. The correct one is the late, @react-three/fiber

Upvotes: 1

Related Questions