1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| import React, { useRef, useState, useEffect } from 'react';
| import {
| PerspectiveCamera,
| CameraControls,
| PresentationControls,
| FlyControls,
| OrbitControls,
| FirstPersonControls,
| MapControls,
| } from '@react-three/drei';
| import { useThree, useFrame } from '@react-three/fiber';
|
| const Controls = (props) => {
| const controlsRef = useRef();
| const [choiceCtrls, setChoiceCtrls] = useState(false);
|
| useEffect(() => {
| if (props.fly) {
| setChoiceCtrls(false);
| } else {
| setChoiceCtrls(true);
| }
| }, [props])
|
| const ctrl = () => {
| return (
| <group>
| {/* <PresentationControls /> */}
| {/* <CameraControls ref={controlsRef} /> */}
| <OrbitControls
| ref={controlsRef}
| autoRotate
| autoRotateSpeed={0.5}
| target={[-200, 100, 0]}
| />
| {/* <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()}
| </>
| );
| };
|
| export default Controls;
|
|