diff --git a/src/hooks/usePlaybackWebSocket.ts b/src/hooks/usePlaybackWebSocket.ts
index 5acb74e..b755160 100644
--- a/src/hooks/usePlaybackWebSocket.ts
+++ b/src/hooks/usePlaybackWebSocket.ts
@@ -4,6 +4,7 @@ import { type Ref, ref, type ShallowRef, shallowRef } from 'vue';
 
 import type { RobotRealtimeInfo } from '../apis/robot';
 import type { EditorService } from '../services/editor.service';
+import { useViewState } from '../services/useViewState';
 import ws from '../services/ws';
 
 // Define the structure of WebSocket messages for playback
@@ -51,6 +52,15 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
   const currentSceneId = ref<string | null>(null);
   const sceneJson = ref<string | null>(null);
 
+  const { calculateCenterPoint, jumpToPosition } = useViewState();
+
+  const locateCenter = () => {
+    if (editorService.value) {
+      const { centerX, centerY } = calculateCenterPoint(editorService.value);
+      jumpToPosition(editorService.value, centerX, centerY, false, 0.05);
+    }
+  };
+
   const latestRobotData = new Map<string, RobotRealtimeInfo>();
   let animationFrameId: number;
 
@@ -82,6 +92,11 @@ export function usePlaybackWebSocket(editorService: ShallowRef<EditorService | u
           // For seamless scene switching, we only update the scene JSON.
           // Time and playback state should continue uninterrupted.
           sceneJson.value = msg.data;
+          // After receiving a new scene, automatically center the view.
+          // Use a timeout to allow the new scene to be rendered first.
+          setTimeout(() => {
+            locateCenter();
+          }, 100);
         } else if (msg.type === 'AMR') {
           (msg.data as RobotRealtimeInfo[]).forEach(robot => {
             latestRobotData.set(robot.id, robot);