Skip to content

Commit 0d449db

Browse files
Aiga115Aiga115
committed
GEP-200 fix props
1 parent 7fe0754 commit 0d449db

File tree

8 files changed

+108
-37
lines changed

8 files changed

+108
-37
lines changed

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/EnhancedZoomGroup3D.tsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,25 @@ import { Toolbar3DButton } from "../Toolbar3D";
33
import type { Canvas3DRootState } from "../../Canvas3D";
44
import { PerspectiveCamera } from "three";
55

6-
const EnhancedZoom3DButtons: React.FC = () => {
6+
interface ZoomOptions {
7+
fovStep?: number;
8+
minFov?: number;
9+
maxFov?: number;
10+
dollyStep?: number;
11+
}
12+
13+
interface EnhancedZoom3DButtonsProps {
14+
zoomOptions?: ZoomOptions;
15+
}
16+
17+
const EnhancedZoom3DButtons: React.FC<EnhancedZoom3DButtonsProps> = ({ zoomOptions = { fovStep: 5, minFov: 10, maxFov: 120, dollyStep: 0.5 } }) => {
18+
const { fovStep, minFov, maxFov, dollyStep } = zoomOptions;
19+
720
const handleZoomIn = (fiber: Canvas3DRootState) => {
821
if (fiber?.camera) {
922
const camera = fiber.camera;
1023
if (camera instanceof PerspectiveCamera) {
11-
camera.fov = Math.max(camera.fov - 5, 10);
24+
camera.fov = Math.max(camera.fov - fovStep, minFov);
1225
camera.updateProjectionMatrix();
1326
}
1427
}
@@ -18,21 +31,21 @@ const EnhancedZoom3DButtons: React.FC = () => {
1831
if (fiber?.camera) {
1932
const camera = fiber.camera;
2033
if (camera instanceof PerspectiveCamera) {
21-
camera.fov = Math.min(camera.fov + 5, 120);
34+
camera.fov = Math.min(camera.fov + fovStep, maxFov);
2235
camera.updateProjectionMatrix();
2336
}
2437
}
2538
};
2639

2740
const handleDollyIn = (fiber: Canvas3DRootState) => {
2841
if (fiber?.controls) {
29-
fiber.controls.dolly(-0.5, true);
42+
fiber.controls.dolly(-dollyStep, true);
3043
}
3144
};
3245

3346
const handleDollyOut = (fiber: Canvas3DRootState) => {
3447
if (fiber?.controls) {
35-
fiber.controls.dolly(0.5, true);
48+
fiber.controls.dolly(dollyStep, true);
3649
}
3750
};
3851

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/NavigationGroup3D.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,18 @@ import PanRight3D from "./PanRight3D";
44
import PanDown3D from "./PanDown3D";
55
import PanUp3D from "./PanUp3D";
66

7-
const Navigation3D: React.FC = () => {
7+
interface PanOptions {
8+
distance?: number;
9+
useTransition?: boolean;
10+
}
11+
12+
const Navigation3D: React.FC<{ panOptions?: PanOptions }> = ({ panOptions = { distance: 0.5, useTransition: true } }) => {
813
return (
914
<>
10-
<PanLeft3D />
11-
<PanRight3D />
12-
<PanDown3D />
13-
<PanUp3D />
15+
<PanLeft3D panOptions={panOptions} />
16+
<PanRight3D panOptions={panOptions} />
17+
<PanDown3D panOptions={panOptions} />
18+
<PanUp3D panOptions={panOptions} />
1419
</>
1520
);
1621
};

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/PanDown3D.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@ import { Toolbar3DButton } from "../Toolbar3D";
33
import { Canvas3DRootState } from "../../Canvas3D";
44
import * as THREE from "three";
55

6-
const PanDown3D: React.FC = () => {
6+
interface PanDown3DProps {
7+
distance?: number;
8+
useTransition?: boolean;
9+
}
10+
11+
const PanDown3D: React.FC<{ panOptions?: PanDown3DProps }> = ({ panOptions }) => {
12+
const { distance = 0.5, useTransition = true } = panOptions || {};
13+
714
const handlePanDown = (fiber: Canvas3DRootState) => {
815
if (fiber?.controls) {
9-
fiber.controls.truck(0, -0.5, true);
16+
fiber.controls.truck(0, -distance, useTransition);
1017
} else if (fiber?.camera) {
1118
const camera = fiber.camera;
1219
const right = new THREE.Vector3();

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/PanLeft3D.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@ interface PanLeft3DProps {
88
useTransition?: boolean;
99
}
1010

11-
const PanLeft3D: React.FC<PanLeft3DProps> = ({
12-
distance = 0.5,
13-
useTransition = true,
14-
}) => {
11+
const PanLeft3D: React.FC<{ panOptions?: PanLeft3DProps }> = ({ panOptions }) => {
12+
const { distance = 0.5, useTransition = true } = panOptions || {};
13+
1514
const handlePanLeft = (fiber: Canvas3DRootState) => {
1615
if (fiber?.controls) {
1716
fiber.controls.truck(-distance, 0, useTransition);

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/PanRight3D.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,17 @@ import React from "react";
22
import { Toolbar3DButton } from "../Toolbar3D";
33
import { Canvas3DRootState } from "../../Canvas3D";
44

5-
const PanRight3D: React.FC = () => {
5+
interface PanRight3DProps {
6+
distance?: number;
7+
useTransition?: boolean;
8+
}
9+
10+
const PanRight3D: React.FC<{ panOptions?: PanRight3DProps }> = ({ panOptions }) => {
11+
const { distance = 0.5, useTransition = true } = panOptions || {};
12+
613
const handlePanRight = (fiber: Canvas3DRootState) => {
714
if (fiber?.controls) {
8-
fiber.controls.truck(0.5, 0, true);
15+
fiber.controls.truck(distance, 0, useTransition);
916
} else if (fiber?.camera) {
1017
const camera = fiber.camera;
1118
const moveDistance = 1;

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/PanUp3D.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,17 @@ import { Toolbar3DButton } from "../Toolbar3D";
33
import { Canvas3DRootState } from "../../Canvas3D";
44
import * as THREE from "three";
55

6-
const PanUp3D: React.FC = () => {
6+
interface PanUp3DProps {
7+
distance?: number;
8+
useTransition?: boolean;
9+
}
10+
11+
const PanUp3D: React.FC<{ panOptions?: PanUp3DProps }> = ({ panOptions }) => {
12+
const { distance = 0.5, useTransition = true } = panOptions || {};
13+
714
const handlePanUp = (fiber: Canvas3DRootState) => {
815
if (fiber?.controls) {
9-
fiber.controls.truck(0, 0.5, true);
16+
fiber.controls.truck(0, distance, useTransition);
1017
} else if (fiber?.camera) {
1118
const camera = fiber.camera;
1219
const right = new THREE.Vector3();

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/RotationGroup3D.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,24 @@ import * as THREE from "three";
33
import { Canvas3DRootState } from "../../Canvas3D";
44
import { Toolbar3DButton } from "../Toolbar3D";
55

6-
const ROTATION_SPEED = 0.5;
7-
const MANUAL_ROTATION_AMOUNT = 0.2;
8-
const CAMERA_ROTATION_AMOUNT = 0.1;
6+
interface RotationOptions {
7+
rotationSpeed?: number;
8+
manualStep?: number;
9+
cameraStep?: number;
10+
}
911

1012
interface RotationControls {
1113
horizontal: (fiber: Canvas3DRootState, direction: 1 | -1) => void;
1214
vertical: (fiber: Canvas3DRootState, direction: 1 | -1) => void;
1315
}
1416

15-
const Animation3DControls: React.FC = () => {
17+
const Animation3DControls: React.FC<{ rotationOptions?: RotationOptions }> = ({ rotationOptions = {
18+
rotationSpeed: 0.5,
19+
manualStep: 0.2,
20+
cameraStep: 0.1
21+
} }) => {
22+
const { rotationSpeed, manualStep, cameraStep } = rotationOptions;
23+
1624
const [isPlaying, setIsPlaying] = useState(false);
1725
const [isPaused, setIsPaused] = useState(false);
1826
const animationRef = useRef<number | null>(null);
@@ -44,7 +52,7 @@ const Animation3DControls: React.FC = () => {
4452
const animate = () => {
4553
if (currentFiberRef.current?.controls) {
4654
const currentTime = Date.now() * 0.001;
47-
const newAngle = startAngleRef.current + currentTime * ROTATION_SPEED;
55+
const newAngle = startAngleRef.current + currentTime * rotationSpeed;
4856

4957
currentFiberRef.current.controls.rotateTo(
5058
newAngle,
@@ -85,7 +93,7 @@ const Animation3DControls: React.FC = () => {
8593
const rotateHorizontalCamera = (camera: THREE.Camera, angle: number) => {
8694
const radius = camera.position.length();
8795
const currentAngle = Math.atan2(camera.position.x, camera.position.z);
88-
const newAngle = currentAngle + angle * CAMERA_ROTATION_AMOUNT;
96+
const newAngle = currentAngle + angle * cameraStep;
8997

9098
camera.position.x = radius * Math.sin(newAngle);
9199
camera.position.z = radius * Math.cos(newAngle);
@@ -101,7 +109,7 @@ const Animation3DControls: React.FC = () => {
101109
.normalize();
102110

103111
const rotationMatrix = new THREE.Matrix4();
104-
rotationMatrix.makeRotationAxis(right, direction * CAMERA_ROTATION_AMOUNT);
112+
rotationMatrix.makeRotationAxis(right, direction * cameraStep);
105113

106114
camera.position.applyMatrix4(rotationMatrix);
107115
camera.lookAt(0, 0, 0);
@@ -113,7 +121,7 @@ const Animation3DControls: React.FC = () => {
113121
if (fiber?.controls) {
114122
const currentAzimuth = fiber.controls.azimuthAngle;
115123
fiber.controls.rotateTo(
116-
currentAzimuth + direction * MANUAL_ROTATION_AMOUNT,
124+
currentAzimuth + direction * manualStep,
117125
fiber.controls.polarAngle,
118126
true
119127
);
@@ -123,7 +131,7 @@ const Animation3DControls: React.FC = () => {
123131
},
124132
vertical: (fiber: Canvas3DRootState, direction: 1 | -1) => {
125133
if (fiber?.controls) {
126-
fiber.controls.rotate(0, direction * MANUAL_ROTATION_AMOUNT, true);
134+
fiber.controls.rotate(0, direction * manualStep, true);
127135
} else if (fiber?.camera) {
128136
rotateVerticalCamera(fiber.camera, direction);
129137
}

‎geppetto.js/geppetto-ui/src/3d-canvas/toolbar/groups/ZoomGroup3D.tsx‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,75 @@ import { Toolbar3DButton } from "../Toolbar3D";
33
import { Canvas3DRootState } from "../../Canvas3D";
44
import { PerspectiveCamera, OrthographicCamera } from "three";
55

6+
interface ZoomOptions {
7+
fovStep?: number;
8+
minFov?: number;
9+
maxFov?: number;
10+
minZoom?: number;
11+
zoomMultiplier?: number;
12+
maxZoom?: number;
13+
}
14+
615
const Zoom3DButtons: React.FC = () => {
7-
const handleZoomIn = (fiber: Canvas3DRootState) => {
16+
const handleZoomIn = (
17+
fiber: Canvas3DRootState,
18+
{
19+
fovStep = 5,
20+
minFov = 10,
21+
zoomMultiplier = 1.1,
22+
maxZoom = 10
23+
}: ZoomOptions = {}
24+
) => {
825
console.log("Zoom In clicked!");
926

1027
if (fiber?.controls && fiber?.camera) {
1128
// TRUE ZOOM: Change FOV, not camera position
1229
const camera = fiber.camera;
1330
if (camera instanceof PerspectiveCamera) {
14-
camera.fov = Math.max(camera.fov - 5, 10); // Decrease FOV = zoom in
31+
camera.fov = Math.max(camera.fov - fovStep, minFov);
1532
camera.updateProjectionMatrix();
1633
console.log("Zoomed in using FOV change");
1734
}
1835
} else if (fiber?.camera) {
1936
// Fallback zoom logic
2037
const camera = fiber.camera;
2138
if (camera instanceof PerspectiveCamera) {
22-
camera.fov = Math.max(camera.fov - 5, 10);
39+
camera.fov = Math.max(camera.fov - fovStep, minFov);
2340
camera.updateProjectionMatrix();
2441
} else if (camera instanceof OrthographicCamera) {
25-
camera.zoom = Math.min(camera.zoom * 1.1, 10);
42+
camera.zoom = Math.min(camera.zoom * zoomMultiplier, maxZoom);
2643
camera.updateProjectionMatrix();
2744
}
2845
}
2946
};
3047

31-
const handleZoomOut = (fiber: Canvas3DRootState) => {
48+
const handleZoomOut = (
49+
fiber: Canvas3DRootState,
50+
{
51+
fovStep = 5,
52+
maxFov = 120,
53+
zoomMultiplier = 0.9,
54+
minZoom = 0.1
55+
}: ZoomOptions = {}
56+
) => {
3257
console.log("Zoom Out clicked!");
3358

3459
if (fiber?.controls && fiber?.camera) {
3560
// TRUE ZOOM: Change FOV, not camera position
3661
const camera = fiber.camera;
3762
if (camera instanceof PerspectiveCamera) {
38-
camera.fov = Math.min(camera.fov + 5, 120); // Increase FOV = zoom out
63+
camera.fov = Math.min(camera.fov + fovStep, maxFov); // Increase FOV = zoom out
3964
camera.updateProjectionMatrix();
4065
console.log("Zoomed out using FOV change");
4166
}
4267
} else if (fiber?.camera) {
4368
// Fallback zoom logic
4469
const camera = fiber.camera;
4570
if (camera instanceof PerspectiveCamera) {
46-
camera.fov = Math.min(camera.fov + 5, 120);
71+
camera.fov = Math.min(camera.fov + fovStep, maxFov);
4772
camera.updateProjectionMatrix();
4873
} else if (camera instanceof OrthographicCamera) {
49-
camera.zoom = Math.max(camera.zoom * 0.9, 0.1);
74+
camera.zoom = Math.max(camera.zoom * zoomMultiplier, minZoom);
5075
camera.updateProjectionMatrix();
5176
}
5277
}

0 commit comments

Comments
 (0)