如何在react-three/fiber中拖动x和z中受y约束的对象，并使用可以通过orbitcontrol移动的正交相机？

import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from 'react-three-fiber';
import { OrbitControls, PerspectiveCamera, Box } from 'drei';

const DragObject = () => {
  const boxRef = useRef();
  const [dragging, setDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });

  const handlePointerDown = (event) => {
    event.stopPropagation();
    setDragging(true);
    setDragOffset({
      x: event.clientX - boxRef.current.position.x,
      y: event.clientY - boxRef.current.position.y,
    });
  };

  const handlePointerMove = (event) => {
    if (!dragging) return;
    boxRef.current.position.x = event.clientX - dragOffset.x;
    boxRef.current.position.z = event.clientY - dragOffset.y;
  };

  const handlePointerUp = () => {
    setDragging(false);
  };

  useFrame(() => {
    if (boxRef.current) {
      boxRef.current.rotation.x += 0.01;
      boxRef.current.rotation.y += 0.01;
    }
  });

  return (
    <Box
      ref={boxRef}
      position={[0, 0, 0]}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
    />
  );
};

const App = () => {
  return (
    <Canvas>
      <PerspectiveCamera makeDefault position={[0, 0, 5]} zoom={10} />
      <OrbitControls />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <DragObject />
    </Canvas>
  );
};

export default App;