Skip to content

Commit eebb550

Browse files
Aiga115Aiga115
committed
GEP-200 remove referrence to camera controls
1 parent 2d2055c commit eebb550

File tree

8 files changed

+81
-104
lines changed

8 files changed

+81
-104
lines changed

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/Backward3D.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
44

55
const Backward3D: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
7-
8-
const handleBackward = (fiber: any) => {
9-
if (cameraControlsRef?.current) {
10-
cameraControlsRef.current.dolly(0.5, true);
6+
const handleBackward = (fiber: Canvas3DRootState) => {
7+
if (fiber?.controls) {
8+
fiber.controls.dolly(0.5, true);
119
} else if (fiber?.camera) {
1210
const camera = fiber.camera;
1311
const moveDistance = 1;

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/EnhancedZoomGroup3D.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
4+
import { PerspectiveCamera } from "three";
45

56
const EnhancedZoom3DButtons: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
7-
8-
const handleZoomIn = (fiber: any) => {
7+
const handleZoomIn = (fiber: Canvas3DRootState) => {
98
if (fiber?.camera) {
109
const camera = fiber.camera;
11-
if (camera.isPerspectiveCamera) {
10+
if (camera instanceof PerspectiveCamera) {
1211
camera.fov = Math.max(camera.fov - 5, 10);
1312
camera.updateProjectionMatrix();
1413
}
1514
}
1615
};
1716

18-
const handleZoomOut = (fiber: any) => {
17+
const handleZoomOut = (fiber: Canvas3DRootState) => {
1918
if (fiber?.camera) {
2019
const camera = fiber.camera;
21-
if (camera.isPerspectiveCamera) {
20+
if (camera instanceof PerspectiveCamera) {
2221
camera.fov = Math.min(camera.fov + 5, 120);
2322
camera.updateProjectionMatrix();
2423
}
2524
}
2625
};
2726

28-
const handleDollyIn = (_fiber: any) => {
29-
if (cameraControlsRef?.current) {
30-
cameraControlsRef.current.dolly(-0.5, true);
27+
const handleDollyIn = (fiber: Canvas3DRootState) => {
28+
if (fiber?.controls) {
29+
fiber.controls.dolly(-0.5, true);
3130
}
3231
};
3332

34-
const handleDollyOut = (_fiber: any) => {
35-
if (cameraControlsRef?.current) {
36-
cameraControlsRef.current.dolly(0.5, true);
33+
const handleDollyOut = (fiber: Canvas3DRootState) => {
34+
if (fiber?.controls) {
35+
fiber.controls.dolly(0.5, true);
3736
}
3837
};
3938

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/Forward3D.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
44

55
const Forward3D: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
7-
8-
const handleForward = (fiber: any) => {
9-
if (cameraControlsRef?.current) {
10-
cameraControlsRef.current.dolly(-0.5, true);
6+
const handleForward = (fiber: Canvas3DRootState) => {
7+
if (fiber?.controls) {
8+
fiber.controls.dolly(-0.5, true);
119
} else if (fiber?.camera) {
1210
const camera = fiber.camera;
1311
const moveDistance = 1;

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/PanLeft3D.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
44
import * as THREE from "three";
55

66
const PanLeft3D: React.FC = () => {
7-
const cameraControlsRef = useCameraControls();
8-
9-
const handlePanLeft = (fiber: any) => {
10-
if (cameraControlsRef?.current) {
11-
cameraControlsRef.current.truck(-0.5, 0, true);
7+
const handlePanLeft = (fiber: Canvas3DRootState) => {
8+
if (fiber?.controls) {
9+
fiber.controls.truck(-0.5, 0, true);
1210
} else if (fiber?.camera) {
1311
const camera = fiber.camera;
1412
const right = new THREE.Vector3();

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/PanRight3D.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
44

55
const PanRight3D: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
7-
8-
const handlePanRight = (fiber: any) => {
9-
if (cameraControlsRef?.current) {
10-
cameraControlsRef.current.truck(0.5, 0, true);
6+
const handlePanRight = (fiber: Canvas3DRootState) => {
7+
if (fiber?.controls) {
8+
fiber.controls.truck(0.5, 0, true);
119
} else if (fiber?.camera) {
1210
const camera = fiber.camera;
1311
const moveDistance = 1;

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/RotationGroup3D.tsx‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useState, useRef, useEffect } from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
44

55
const Animation3DControls: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
76
const [isPlaying, setIsPlaying] = useState(false);
87
const [isPaused, setIsPaused] = useState(false);
98
const animationRef = useRef<number | null>(null);
109
const startAngleRef = useRef<number>(0);
10+
const currentFiberRef = useRef<Canvas3DRootState | null>(null);
1111

1212
useEffect(() => {
1313
return () => {
@@ -17,24 +17,25 @@ const Animation3DControls: React.FC = () => {
1717
};
1818
}, []);
1919

20-
const handlePlay = (_fiber: any) => {
21-
if (cameraControlsRef?.current) {
20+
const handlePlay = (fiber: Canvas3DRootState) => {
21+
if (fiber?.controls) {
22+
currentFiberRef.current = fiber;
2223
setIsPlaying(true);
2324
setIsPaused(false);
2425

2526
if (!isPaused) {
26-
startAngleRef.current = cameraControlsRef.current.azimuthAngle;
27+
startAngleRef.current = fiber.controls.azimuthAngle;
2728
}
2829

2930
const animate = () => {
30-
if (cameraControlsRef.current) {
31+
if (currentFiberRef.current?.controls) {
3132
const currentTime = Date.now() * 0.001;
3233
const rotationSpeed = 0.5;
3334
const newAngle = startAngleRef.current + currentTime * rotationSpeed;
3435

35-
cameraControlsRef.current.rotateTo(
36+
currentFiberRef.current.controls.rotateTo(
3637
newAngle,
37-
cameraControlsRef.current.polarAngle,
38+
currentFiberRef.current.controls.polarAngle,
3839
false
3940
);
4041

@@ -49,7 +50,7 @@ const Animation3DControls: React.FC = () => {
4950
}
5051
};
5152

52-
const handlePause = (_fiber: any) => {
53+
const handlePause = (_fiber: Canvas3DRootState) => {
5354
if (animationRef.current) {
5455
cancelAnimationFrame(animationRef.current);
5556
animationRef.current = null;
@@ -58,7 +59,7 @@ const Animation3DControls: React.FC = () => {
5859
}
5960
};
6061

61-
const handleStop = (_fiber: any) => {
62+
const handleStop = (fiber: Canvas3DRootState) => {
6263
if (animationRef.current) {
6364
cancelAnimationFrame(animationRef.current);
6465
animationRef.current = null;
@@ -67,15 +68,15 @@ const Animation3DControls: React.FC = () => {
6768
setIsPlaying(false);
6869
setIsPaused(false);
6970

70-
if (cameraControlsRef?.current) {
71-
cameraControlsRef.current.reset(true);
71+
if (fiber?.controls) {
72+
fiber.controls.reset(true);
7273
}
7374
};
7475

75-
const handleRotateLeft = (fiber: any) => {
76-
if (cameraControlsRef?.current) {
77-
const currentAzimuth = cameraControlsRef.current.azimuthAngle;
78-
cameraControlsRef.current.rotateTo(currentAzimuth + 0.2, cameraControlsRef.current.polarAngle, true);
76+
const handleRotateLeft = (fiber: Canvas3DRootState) => {
77+
if (fiber?.controls) {
78+
const currentAzimuth = fiber.controls.azimuthAngle;
79+
fiber.controls.rotateTo(currentAzimuth + 0.2, fiber.controls.polarAngle, true);
7980
} else if (fiber?.camera) {
8081
const camera = fiber.camera;
8182
const radius = camera.position.length();
@@ -89,10 +90,10 @@ const Animation3DControls: React.FC = () => {
8990
}
9091
};
9192

92-
const handleRotateRight = (fiber: any) => {
93-
if (cameraControlsRef?.current) {
94-
const currentAzimuth = cameraControlsRef.current.azimuthAngle;
95-
cameraControlsRef.current.rotateTo(currentAzimuth - 0.2, cameraControlsRef.current.polarAngle, true);
93+
const handleRotateRight = (fiber: Canvas3DRootState) => {
94+
if (fiber?.controls) {
95+
const currentAzimuth = fiber.controls.azimuthAngle;
96+
fiber.controls.rotateTo(currentAzimuth - 0.2, fiber.controls.polarAngle, true);
9697
} else if (fiber?.camera) {
9798
const camera = fiber.camera;
9899
const radius = camera.position.length();

‎examples/vite-3DCanvas-react-app/src/components/toolbar/groups/ZoomGroup3D.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,51 @@
11
import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
3-
import { useCameraControls } from "../CameraControlsContext";
3+
import { Canvas3DRootState } from "@metacell/geppetto-meta-ui/3d-canvas/Canvas3D";
4+
import { PerspectiveCamera, OrthographicCamera } from "three";
45

56
const Zoom3DButtons: React.FC = () => {
6-
const cameraControlsRef = useCameraControls();
7-
8-
const handleZoomIn = (fiber: any) => {
7+
const handleZoomIn = (fiber: Canvas3DRootState) => {
98
console.log("Zoom In clicked!");
109

11-
if (cameraControlsRef?.current && fiber?.camera) {
10+
if (fiber?.controls && fiber?.camera) {
1211
// TRUE ZOOM: Change FOV, not camera position
1312
const camera = fiber.camera;
14-
if (camera.isPerspectiveCamera) {
13+
if (camera instanceof PerspectiveCamera) {
1514
camera.fov = Math.max(camera.fov - 5, 10); // Decrease FOV = zoom in
1615
camera.updateProjectionMatrix();
1716
console.log("Zoomed in using FOV change");
1817
}
1918
} else if (fiber?.camera) {
2019
// Fallback zoom logic
2120
const camera = fiber.camera;
22-
if (camera.isPerspectiveCamera) {
21+
if (camera instanceof PerspectiveCamera) {
2322
camera.fov = Math.max(camera.fov - 5, 10);
2423
camera.updateProjectionMatrix();
25-
} else if (camera.isOrthographicCamera) {
24+
} else if (camera instanceof OrthographicCamera) {
2625
camera.zoom = Math.min(camera.zoom * 1.1, 10);
2726
camera.updateProjectionMatrix();
2827
}
2928
}
3029
};
3130

32-
const handleZoomOut = (fiber: any) => {
31+
const handleZoomOut = (fiber: Canvas3DRootState) => {
3332
console.log("Zoom Out clicked!");
3433

35-
if (cameraControlsRef?.current && fiber?.camera) {
34+
if (fiber?.controls && fiber?.camera) {
3635
// TRUE ZOOM: Change FOV, not camera position
3736
const camera = fiber.camera;
38-
if (camera.isPerspectiveCamera) {
37+
if (camera instanceof PerspectiveCamera) {
3938
camera.fov = Math.min(camera.fov + 5, 120); // Increase FOV = zoom out
4039
camera.updateProjectionMatrix();
4140
console.log("Zoomed out using FOV change");
4241
}
4342
} else if (fiber?.camera) {
4443
// Fallback zoom logic
4544
const camera = fiber.camera;
46-
if (camera.isPerspectiveCamera) {
45+
if (camera instanceof PerspectiveCamera) {
4746
camera.fov = Math.min(camera.fov + 5, 120);
4847
camera.updateProjectionMatrix();
49-
} else if (camera.isOrthographicCamera) {
48+
} else if (camera instanceof OrthographicCamera) {
5049
camera.zoom = Math.max(camera.zoom * 0.9, 0.1);
5150
camera.updateProjectionMatrix();
5251
}

‎examples/vite-3DCanvas-react-app/src/components/viewers/Canvas3DExample.tsx‎

Lines changed: 20 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,11 @@ import {
66
import { Box } from "@mui/material";
77
import { useFrame } from "@react-three/fiber";
88
import { Mesh } from "three";
9-
import { CameraControls } from "@react-three/drei";
109
import {
1110
Toolbar3D,
1211
Toolbar3DButton,
1312
Toolbar3DSeparator,
1413
} from "../toolbar/Toolbar3D";
15-
import { CameraControlsProvider } from "../toolbar/CameraControlsContext";
1614
import {
1715
Navigation3D,
1816
EnhancedZoom3DButtons,
@@ -59,29 +57,27 @@ function MyRotatingBox() {
5957

6058
const Canvas3DExample: React.FC = () => {
6159
const [activeCamera, setActiveCamera] = useState(false);
62-
const cameraControlsRef = useRef<CameraControls>(null);
6360

64-
const handleCameraClick = (fiber: Canvas3DRootState) => {
65-
console.log("Camera clicked", fiber.camera);
66-
console.log("Camera clicked", fiber);
61+
const handleCameraClick = ({ controls, camera }: Canvas3DRootState) => {
62+
console.debug("My Controls is", controls);
63+
console.debug("My Camera is", camera);
6764
console.log("Current activeCamera state:", activeCamera);
68-
console.log("CameraControls:", fiber.controls);
6965

7066
setActiveCamera(!activeCamera);
7167

72-
if (fiber.controls) {
68+
if (controls) {
7369
if (!activeCamera) {
7470
console.log("Setting focus position...");
7571

7672
/* prettier-ignore */
77-
fiber.controls.setLookAt(
73+
controls.setLookAt(
7874
5, 5, 5, // Camera position
7975
0, 0, 0, // Look at center
8076
true // Enable animation
8177
);
8278
} else {
8379
console.log("Resetting camera...");
84-
fiber.controls.reset(true);
80+
controls.reset(true);
8581
}
8682
} else {
8783
console.log("CameraControls ref is null!");
@@ -90,14 +86,6 @@ const Canvas3DExample: React.FC = () => {
9086

9187
const Scene = () => (
9288
<>
93-
{/* <CameraControls
94-
ref={cameraControlsRef}
95-
minDistance={2}
96-
maxDistance={20}
97-
enablePan={true}
98-
enableZoom={true}
99-
enableRotate={true}
100-
/> */}
10189
<MyRotatingBox />
10290
<ambientLight intensity={0.5} />
10391
<pointLight position={[10, 10, 10]} />
@@ -108,22 +96,20 @@ const Canvas3DExample: React.FC = () => {
10896
return (
10997
<>
11098
<Box style={{ display: "flex", width: "100%" }}>
111-
<CameraControlsProvider cameraControlsRef={cameraControlsRef}>
112-
<Toolbar3D>
113-
<Navigation3D />
114-
<Toolbar3DSeparator />
115-
<EnhancedZoom3DButtons />
116-
<Toolbar3DSeparator />
117-
<Animation3DControls />
118-
<Toolbar3DSeparator />
119-
<Toolbar3DButton
120-
icon={<i className="fas fa-camera" />}
121-
tooltip={activeCamera ? "Reset Camera" : "Focus Camera"}
122-
onClick={handleCameraClick}
123-
active={activeCamera}
124-
/>
125-
</Toolbar3D>
126-
</CameraControlsProvider>
99+
<Toolbar3D>
100+
<Navigation3D />
101+
<Toolbar3DSeparator />
102+
<EnhancedZoom3DButtons />
103+
<Toolbar3DSeparator />
104+
<Animation3DControls />
105+
<Toolbar3DSeparator />
106+
<Toolbar3DButton
107+
icon={<i className="fas fa-camera" />}
108+
tooltip={activeCamera ? "Reset Camera" : "Focus Camera"}
109+
onClick={handleCameraClick}
110+
active={activeCamera}
111+
/>
112+
</Toolbar3D>
127113
<Box sx={classes.canvasContainer}>
128114
<Canvas3D
129115
frameloop={"always"}

0 commit comments

Comments
 (0)