|  |  |  | 
|---|
|  |  |  | import { useThree } from '@react-three/fiber'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | PerspectiveCamera, | 
|---|
|  |  |  | CameraControls, | 
|---|
|  |  |  | PresentationControls, | 
|---|
|  |  |  | FlyControls, | 
|---|
|  |  |  | OrbitControls, | 
|---|
|  |  |  | FirstPersonControls, | 
|---|
|  |  |  | MapControls, | 
|---|
|  |  |  | } from '@react-three/drei'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const Camera = (props) => { | 
|---|
|  |  |  | const threeObj = useThree(); | 
|---|
|  |  |  | const camera = threeObj.camera; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [choiceCtrls, setChoiceCtrls] = useState(true); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const ctrl = () => { | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <group> | 
|---|
|  |  |  | {/* 相机控制器 */} | 
|---|
|  |  |  | {/* <PresentationControls /> */} | 
|---|
|  |  |  | <CameraControls /> | 
|---|
|  |  |  | {/* <PointerCtrl /> */} | 
|---|
|  |  |  | </group> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const flyCtrl = () => { | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <group> | 
|---|
|  |  |  | <FirstPersonControls | 
|---|
|  |  |  | far={100000} | 
|---|
|  |  |  | movementSpeed={100} | 
|---|
|  |  |  | activeLook={false} | 
|---|
|  |  |  | lookVertical={true} | 
|---|
|  |  |  | ></FirstPersonControls> | 
|---|
|  |  |  | {/* <OrbitControls /> */} | 
|---|
|  |  |  | <MapControls zoomSpeed={0.1} /> | 
|---|
|  |  |  | </group> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | {choiceCtrls ? ctrl() : flyCtrl()} | 
|---|
|  |  |  | <PerspectiveCamera | 
|---|
|  |  |  | makeDefault | 
|---|
|  |  |  | position={[-100, 200, 1000]} | 
|---|
|  |  |  | position={[0, 350, 1150]} | 
|---|
|  |  |  | fov={48} | 
|---|
|  |  |  | near={1} | 
|---|
|  |  |  | far={100000} | 
|---|