diff --git a/components/canvas/world3d/World3DViewer.tsx b/components/canvas/world3d/World3DViewer.tsx
index f917bf595..60def880a 100644
--- a/components/canvas/world3d/World3DViewer.tsx
+++ b/components/canvas/world3d/World3DViewer.tsx
@@ -6,6 +6,10 @@ import { Canvas, type ThreeEvent, useFrame, useThree } from "@react-three/fiber"
 import { SparkRenderer, SplatMesh as SparkSplatMesh } from "@sparkjsdev/spark";
 import {
   AlertCircle,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
   Box,
   Crosshair,
   Globe,
@@ -29,6 +33,16 @@ type World3DPickResult = {
   point: [number, number, number];
 };
 
+type MovementCommand =
+  | "forward"
+  | "backward"
+  | "left"
+  | "right"
+  | "up"
+  | "down";
+
+type MovementState = Record<MovementCommand, boolean>;
+
 type World3DViewerProps = {
   mode: World3DViewMode;
   worldUrl?: string | null;
@@ -58,6 +72,32 @@ const DEFAULT_MESH_SETTINGS: Model3DViewerSettings = {
   wireframe: false,
 };
 
+const EMPTY_MOVEMENT_STATE: MovementState = {
+  forward: false,
+  backward: false,
+  left: false,
+  right: false,
+  up: false,
+  down: false,
+};
+
+const KEY_TO_MOVEMENT: Partial<Record<string, MovementCommand>> = {
+  KeyW: "forward",
+  ArrowUp: "forward",
+  KeyS: "backward",
+  ArrowDown: "backward",
+  KeyA: "left",
+  ArrowLeft: "left",
+  KeyD: "right",
+  ArrowRight: "right",
+  KeyQ: "up",
+  KeyR: "up",
+  PageUp: "up",
+  KeyE: "down",
+  KeyF: "down",
+  PageDown: "down",
+};
+
 function getSemanticFacts(metadata?: Record<string, unknown> | null) {
   if (!metadata) return [];
 
@@ -118,24 +158,115 @@ function WorldEmptyState({
   );
 }
 
-function FirstPersonMovement({ enabled }: { enabled: boolean }) {
+function createMovementState(): MovementState {
+  return { ...EMPTY_MOVEMENT_STATE };
+}
+
+function DirectionPad({
+  onCommandChange,
+}: {
+  onCommandChange: (command: MovementCommand, active: boolean) => void;
+}) {
+  const pressHandlers = (command: MovementCommand) => ({
+    onMouseDown: () => onCommandChange(command, true),
+    onMouseUp: () => onCommandChange(command, false),
+    onMouseLeave: () => onCommandChange(command, false),
+    onTouchStart: () => onCommandChange(command, true),
+    onTouchEnd: () => onCommandChange(command, false),
+    onTouchCancel: () => onCommandChange(command, false),
+  });
+
+  return (
+    <div className="pointer-events-auto rounded-2xl border border-white/10 bg-black/55 p-2 shadow-2xl backdrop-blur-sm">
+      <div className="mb-2 text-center text-[10px] text-zinc-400">方向移动</div>
+      <div className="grid grid-cols-3 gap-2">
+        <div />
+        <button
+          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("forward")}
+        >
+          <ArrowUp className="h-4 w-4" />
+        </button>
+        <button
+          className="flex h-10 min-w-[3.25rem] items-center justify-center rounded-xl border border-white/10 bg-white/5 px-2 text-xs text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("up")}
+        >
+          上
+        </button>
+
+        <button
+          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("left")}
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </button>
+        <div className="flex h-10 items-center justify-center rounded-xl border border-dashed border-white/10 bg-white/[0.03] px-2 text-[10px] text-zinc-500">
+          前后左右
+        </div>
+        <button
+          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("right")}
+        >
+          <ArrowRight className="h-4 w-4" />
+        </button>
+
+        <div />
+        <button
+          className="flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("backward")}
+        >
+          <ArrowDown className="h-4 w-4" />
+        </button>
+        <button
+          className="flex h-10 min-w-[3.25rem] items-center justify-center rounded-xl border border-white/10 bg-white/5 px-2 text-xs text-zinc-100 transition hover:bg-white/10"
+          type="button"
+          {...pressHandlers("down")}
+        >
+          下
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function CameraMovementControls({
+  enabled,
+  firstPerson,
+  virtualMovement,
+  orbitControlsRef,
+}: {
+  enabled: boolean;
+  firstPerson: boolean;
+  virtualMovement: MovementState;
+  orbitControlsRef: React.MutableRefObject<any>;
+}) {
   const { camera } = useThree();
-  const pressedKeysRef = useRef<Record<string, boolean>>({});
+  const pressedKeysRef = useRef<MovementState>(createMovementState());
   const directionRef = useRef(new THREE.Vector3());
   const rightRef = useRef(new THREE.Vector3());
   const upRef = useRef(new THREE.Vector3());
+  const moveRef = useRef(new THREE.Vector3());
 
   useEffect(() => {
     if (!enabled) {
-      pressedKeysRef.current = {};
+      pressedKeysRef.current = createMovementState();
       return;
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      pressedKeysRef.current[event.code] = true;
+      const movement = KEY_TO_MOVEMENT[event.code];
+      if (!movement) return;
+      pressedKeysRef.current[movement] = true;
     };
     const handleKeyUp = (event: KeyboardEvent) => {
-      pressedKeysRef.current[event.code] = false;
+      const movement = KEY_TO_MOVEMENT[event.code];
+      if (!movement) return;
+      pressedKeysRef.current[movement] = false;
     };
 
     window.addEventListener("keydown", handleKeyDown);
@@ -151,23 +282,51 @@ function FirstPersonMovement({ enabled }: { enabled: boolean }) {
     if (!enabled) return;
 
     const pressed = pressedKeysRef.current;
-    const moveSpeed = pressed.ShiftLeft || pressed.ShiftRight ? 6.5 : 3.4;
+    const hasMovement =
+      Object.values(pressed).some(Boolean) || Object.values(virtualMovement).some(Boolean);
+    if (!hasMovement) return;
+
+    const moveSpeed = 3.8;
     const distance = moveSpeed * delta;
 
     camera.getWorldDirection(directionRef.current);
-    directionRef.current.normalize();
+    directionRef.current.setY(0).normalize();
     rightRef.current.crossVectors(directionRef.current, camera.up).normalize();
     upRef.current.copy(camera.up).normalize();
 
-    if (pressed.KeyW) camera.position.addScaledVector(directionRef.current, distance);
-    if (pressed.KeyS) camera.position.addScaledVector(directionRef.current, -distance);
-    if (pressed.KeyA) camera.position.addScaledVector(rightRef.current, -distance);
-    if (pressed.KeyD) camera.position.addScaledVector(rightRef.current, distance);
-    if (pressed.KeyQ) camera.position.addScaledVector(upRef.current, distance);
-    if (pressed.KeyE) camera.position.addScaledVector(upRef.current, -distance);
+    moveRef.current.set(0, 0, 0);
+
+    if (pressed.forward || virtualMovement.forward) {
+      moveRef.current.add(directionRef.current);
+    }
+    if (pressed.backward || virtualMovement.backward) {
+      moveRef.current.addScaledVector(directionRef.current, -1);
+    }
+    if (pressed.left || virtualMovement.left) {
+      moveRef.current.addScaledVector(rightRef.current, -1);
+    }
+    if (pressed.right || virtualMovement.right) {
+      moveRef.current.add(rightRef.current);
+    }
+    if (pressed.up || virtualMovement.up) {
+      moveRef.current.add(upRef.current);
+    }
+    if (pressed.down || virtualMovement.down) {
+      moveRef.current.addScaledVector(upRef.current, -1);
+    }
+
+    if (moveRef.current.lengthSq() === 0) return;
+
+    moveRef.current.normalize().multiplyScalar(distance);
+    camera.position.add(moveRef.current);
+
+    if (!firstPerson && orbitControlsRef.current?.target) {
+      orbitControlsRef.current.target.add(moveRef.current);
+      orbitControlsRef.current.update();
+    }
   });
 
-  if (!enabled) return null;
+  if (!enabled || !firstPerson) return null;
   return <PointerLockControls makeDefault />;
 }
 
@@ -218,6 +377,9 @@ function WorldSplatScene({
   onLoadStateChange?: (state: "ready" | "error") => void;
 }) {
   const renderer = useThree((state) => state.gl);
+  const orbitControlsRef = useRef<any>(null);
+  const [virtualMovement, setVirtualMovement] =
+    useState<MovementState>(createMovementState);
   const semanticFacts = useMemo(
     () => getSemanticFacts(semanticsMetadata),
     [semanticsMetadata]
@@ -243,6 +405,7 @@ function WorldSplatScene({
 
   useEffect(() => {
     splatMesh.frustumCulled = false;
+    splatMesh.rotation.x = Math.PI;
     let cancelled = false;
     splatMesh.initialized
       .then(() => {
@@ -263,9 +426,19 @@ function WorldSplatScene({
 
   const groundPlaneOffset =
     typeof semanticsMetadata?.ground_plane_offset === "number"
-      ? semanticsMetadata.ground_plane_offset
+      ? -semanticsMetadata.ground_plane_offset
       : null;
 
+  const handleDirectionChange = (command: MovementCommand, active: boolean) => {
+    setVirtualMovement((prev) => {
+      if (prev[command] === active) return prev;
+      return {
+        ...prev,
+        [command]: active,
+      };
+    });
+  };
+
   const handlePointerDown = (event: ThreeEvent<PointerEvent>) => {
     if (interactionMode !== "hotspot") return;
     event.stopPropagation();
@@ -298,6 +471,12 @@ function WorldSplatScene({
           onSelect={onHotspotSelect}
         />
       ))}
+      <CameraMovementControls
+        enabled={interactionMode === "navigate"}
+        firstPerson={firstPerson}
+        orbitControlsRef={orbitControlsRef}
+        virtualMovement={virtualMovement}
+      />
       {!firstPerson ? (
         <OrbitControls
           autoRotate={false}
@@ -307,9 +486,15 @@ function WorldSplatScene({
           makeDefault
           maxDistance={16}
           minDistance={0.5}
+          ref={orbitControlsRef}
         />
       ) : (
-        <FirstPersonMovement enabled />
+        <OrbitControls
+          enablePan={false}
+          enableRotate={false}
+          enableZoom={false}
+          ref={orbitControlsRef}
+        />
       )}
       <Html className="pointer-events-none" fullscreen>
         <div className="flex h-full w-full flex-col justify-between p-4">
@@ -336,13 +521,20 @@ function WorldSplatScene({
           </div>
           <div className="flex items-end justify-between">
             <div className="rounded-2xl border border-white/10 bg-black/55 px-3 py-2 text-[11px] text-zinc-300 backdrop-blur-sm">
-              {firstPerson ? "WASD 移动 · 鼠标观察 · Shift 加速 · Esc 退出" : "拖拽旋转 · 滚轮缩放 · 原生 SPZ 渲染"}
+              {firstPerson
+                ? "方向键 / WASD 前后左右 · Q/E 或 PgUp/PgDn 上下 · 鼠标观察 · Esc 退出"
+                : "拖拽旋转 · 滚轮缩放 · 方向键 / 按钮可做六向移动"}
+            </div>
+            <div className="flex items-end gap-3">
+              {interactionMode === "navigate" ? (
+                <DirectionPad onCommandChange={handleDirectionChange} />
+              ) : null}
+              {(firstPerson || interactionMode === "hotspot") && (
+                <div className="flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-black/55 text-zinc-100 shadow-xl backdrop-blur-sm">
+                  <Crosshair className="h-5 w-5" />
+                </div>
+              )}
             </div>
-            {(firstPerson || interactionMode === "hotspot") && (
-              <div className="flex h-12 w-12 items-center justify-center rounded-full border border-white/10 bg-black/55 text-zinc-100 shadow-xl backdrop-blur-sm">
-                <Crosshair className="h-5 w-5" />
-              </div>
-            )}
           </div>
         </div>
       </Html>