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

Question

我正在尝试根据鼠标移动来控制立方体旋转，尽管

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

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

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

javascript

reactjs

react-three-fiber