feature to lock camera position relative to the car

app/components/maps/LoadedReplays.tsx

@@ -220,6 +220,11 @@ const LoadedReplays = ({
                         onChange={(e: RadioChangeEvent) => { timeLineGlobal.cameraMode = e.target.value; }}
                         className="flex gap-4"
                     >
+                        {timeLineGlobal.followedReplay && (
+                            <Radio.Button value={CameraMode.Lock}>
+                                Lock
+                            </Radio.Button>
+                        )}
                         <Radio.Button value={CameraMode.Target}>
                             Target
                         </Radio.Button>

app/components/viewer/ReplayCars.tsx

@@ -43,6 +43,9 @@ const ReplayCar = ({
     let curSample = replay.samples[0];
     const smoothSample: ReplayDataPoint = { ...replay.samples[0] };
 
+    // keep track of the camera mode switches
+    let prevCamMode = timeLineGlobal.cameraMode;
+
     // Get own material from loaded car model
     const carMesh: THREE.Mesh = fbx.children[0] as THREE.Mesh;
     const material: THREE.MeshPhongMaterial = carMesh.material as THREE.MeshPhongMaterial;
@@ -109,6 +112,21 @@ const ReplayCar = ({
                 if (orbitControlsRef && orbitControlsRef.current) {
                     orbitControlsRef.current.target.lerp(smoothSample.position, 0.2);
 
+                    if (timeLineGlobal.cameraMode === CameraMode.Lock) {
+                        // Set camPosRef to camera position only once
+                        if (prevCamMode !== timeLineGlobal.cameraMode) {
+                            camPosRef.current.position.set(
+                                camera.position.x - mesh.current.position.x,
+                                camera.position.y - mesh.current.position.y,
+                                camera.position.z - mesh.current.position.z,
+                            );
+                        }
+                        // move camera to camPosMesh world position
+                        const camWorldPos: THREE.Vector3 = new THREE.Vector3();
+                        camPosRef.current.getWorldPosition(camWorldPos);
+                        camera.position.lerp(camWorldPos, 0.3);
+                    }
+
                     if (timeLineGlobal.cameraMode === CameraMode.Follow) {
                         // move camPosMesh to Follow position
                         camPosRef.current.rotation.setFromQuaternion(carRotation);
@@ -142,6 +160,7 @@ const ReplayCar = ({
             } else {
                 stadiumCarMesh.current.scale.lerp(new THREE.Vector3(0.01, 0.01, 0.01), 0.2);
             }
+            prevCamMode = timeLineGlobal.cameraMode;
         }
     });
 

app/lib/contexts/SettingsContext.tsx

@@ -6,6 +6,7 @@ import { LineType, LineTypes } from '../../components/viewer/ReplayLines';
 export enum CameraMode {
     Target,
     Follow,
+    Lock
 }
 
 export interface SettingsContextProps {