错误 R3F 钩子只能在 Canvas 组件中使用！ 使用THREE函数

Question

我正在尝试根据鼠标移动旋转立方体，即使 <我的旋转框是画布的子项，我一直在得到：错误 R3F 钩子只能在画布组件中使用！ 它可能是由 useTHREE 函数引起的，因为当我删除它时，错误消失了

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

Answer 1

您正在混合命名空间。 正确的是晚了，@react-three/fiber