Simplify interaction prompt display and handling in various components

src/app/App.tsx

@@ -6910,21 +6910,15 @@ export function App({ store, initialStatusMessage }: AppProps) {
               <div className="stat-card">
                 <div className="label">Interaction</div>
                 <div className="value" data-testid="runner-interaction-state">
-                  {activeNavigationMode === "firstPerson"
+                  {runtimeInteractionPrompt === null ? "No target" : "Ready"}
-                    ? runtimeInteractionPrompt === null
-                      ? "No target"
-                      : "Ready"
-                    : "Not available"}
                 </div>
                 <div
                   className="material-summary"
                   data-testid="runner-interaction-summary"
                 >
-                  {activeNavigationMode === "firstPerson"
+                  {runtimeInteractionPrompt === null
-                    ? runtimeInteractionPrompt === null
+                    ? "Aim at an authored Interactable or Scene Exit and click when a prompt appears."
-                      ? "Aim at an authored Interactable or Scene Exit and click when a prompt appears."
+                    : `Click "${runtimeInteractionPrompt.prompt}" within ${runtimeInteractionPrompt.range.toFixed(1)}m.`}
-                      : `Click "${runtimeInteractionPrompt.prompt}" within ${runtimeInteractionPrompt.range.toFixed(1)}m.`
-                    : "Switch to First Person to use click interactions."}
                 </div>
               </div>
 
@@ -6937,7 +6931,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                   {runtimeGlobalState.lastSceneTransition.toSceneName}
                 </div>
               )}
-              {activeNavigationMode === "firstPerson" ? (
+              {
                 <div
                   className="info-banner"
                   data-testid="runner-interaction-help"
@@ -6945,7 +6939,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                   Mouse click activates the current prompt target.
                   Keyboard/controller fallback is not active yet.
                 </div>
-              ) : null}
+              }
             </Panel>
           </aside>
         </div>

src/runner-web/RunnerCanvas.tsx

@@ -225,9 +225,7 @@ export function RunnerCanvas({
       {runnerReady && navigationMode === "firstPerson" ? (
         <div className="runner-canvas__crosshair" aria-hidden="true" />
       ) : null}
-      {runnerReady &&
+      {runnerReady && interactionPrompt !== null ? (
-      navigationMode === "firstPerson" &&
-      interactionPrompt !== null ? (
         <div
           className="runner-canvas__prompt"
           data-testid="runner-interaction-prompt"

src/runtime-three/runtime-host.ts

@@ -1571,22 +1571,7 @@ export class RuntimeHost {
         this.createInteractionDispatcher()
       );
 
-      if (this.activeController === this.firstPersonController) {
+      this.setInteractionPrompt(this.resolveInteractionPrompt());
-        this.camera.getWorldDirection(this.cameraForward);
-        this.setInteractionPrompt(
-          this.interactionSystem.resolveClickInteractionPrompt(
-            this.currentFirstPersonTelemetry.eyePosition,
-            {
-              x: this.cameraForward.x,
-              y: this.cameraForward.y,
-              z: this.cameraForward.z
-            },
-            this.runtimeScene
-          )
-        );
-      } else {
-        this.setInteractionPrompt(null);
-      }
     } else {
       this.setInteractionPrompt(null);
     }
@@ -1714,11 +1699,46 @@ export class RuntimeHost {
     this.interactionPromptHandler?.(prompt);
   }
 
+  private resolveInteractionPrompt(): RuntimeInteractionPrompt | null {
+    if (
+      this.runtimeScene === null ||
+      this.currentFirstPersonTelemetry === null ||
+      (this.activeController !== this.firstPersonController &&
+        this.activeController !== this.thirdPersonController)
+    ) {
+      return null;
+    }
+
+    this.camera.getWorldDirection(this.cameraForward);
+
+    const interactionOrigin = this.currentFirstPersonTelemetry.eyePosition;
+    const rayOrigin =
+      this.activeController === this.thirdPersonController
+        ? {
+            x: this.camera.position.x,
+            y: this.camera.position.y,
+            z: this.camera.position.z
+          }
+        : interactionOrigin;
+
+    return this.interactionSystem.resolveClickInteractionPrompt(
+      interactionOrigin,
+      rayOrigin,
+      {
+        x: this.cameraForward.x,
+        y: this.cameraForward.y,
+        z: this.cameraForward.z
+      },
+      this.runtimeScene
+    );
+  }
+
   private handleRuntimeClick = () => {
     if (
       !this.sceneReady ||
       this.runtimeScene === null ||
-      this.activeController !== this.firstPersonController ||
+      (this.activeController !== this.firstPersonController &&
+        this.activeController !== this.thirdPersonController) ||
       this.currentInteractionPrompt === null
     ) {
       return;

src/runtime-three/runtime-interaction-system.ts

@@ -178,8 +178,13 @@ export class RuntimeInteractionSystem {
     }
   }
 
-  resolveClickInteractionPrompt(viewOrigin: Vec3, viewDirection: Vec3, runtimeScene: RuntimeSceneDefinition): RuntimeInteractionPrompt | null {
+  resolveClickInteractionPrompt(
-    const normalizedViewDirection = normalizeVec3(viewDirection);
+    interactionOrigin: Vec3,
+    rayOrigin: Vec3,
+    rayDirection: Vec3,
+    runtimeScene: RuntimeSceneDefinition
+  ): RuntimeInteractionPrompt | null {
+    const normalizedViewDirection = normalizeVec3(rayDirection);
 
     if (normalizedViewDirection === null) {
       return null;
@@ -193,14 +198,17 @@ export class RuntimeInteractionSystem {
         continue;
       }
 
-      const distance = distanceBetweenVec3(viewOrigin, interactable.position);
+      const distance = distanceBetweenVec3(
+        interactionOrigin,
+        interactable.position
+      );
 
       if (distance > interactable.radius) {
         continue;
       }
 
       const hitDistance = raySphereHitDistance(
-        viewOrigin,
+        rayOrigin,
         normalizedViewDirection,
         interactable.position,
         getInteractableTargetRadius(interactable)
@@ -227,14 +235,14 @@ export class RuntimeInteractionSystem {
         continue;
       }
 
-      const distance = distanceBetweenVec3(viewOrigin, sceneExit.position);
+      const distance = distanceBetweenVec3(interactionOrigin, sceneExit.position);
 
       if (distance > sceneExit.radius) {
         continue;
       }
 
       const hitDistance = raySphereHitDistance(
-        viewOrigin,
+        rayOrigin,
         normalizedViewDirection,
         sceneExit.position,
         Math.min(DEFAULT_INTERACTABLE_TARGET_RADIUS, sceneExit.radius)

tests/domain/runtime-interaction-system.test.ts

@@ -346,6 +346,11 @@ describe("RuntimeInteractionSystem", () => {
           y: 1.6,
           z: 0
         },
+        {
+          x: 0,
+          y: 1.6,
+          z: 0
+        },
         {
           x: 0,
           y: 0,
@@ -362,6 +367,11 @@ describe("RuntimeInteractionSystem", () => {
 
     expect(
       interactionSystem.resolveClickInteractionPrompt(
+        {
+          x: 0,
+          y: 1.6,
+          z: 0
+        },
         {
           x: 0,
           y: 1.6,
@@ -377,6 +387,46 @@ describe("RuntimeInteractionSystem", () => {
     ).toBeNull();
   });
 
+  it("uses the player eye for interaction range while aiming with a third-person camera ray", () => {
+    const runtimeScene = createRuntimeSceneFixture();
+    runtimeScene.interactionLinks = [
+      createTeleportPlayerInteractionLink({
+        id: "link-click-teleport",
+        sourceEntityId: "entity-interactable-console",
+        trigger: "click",
+        targetEntityId: "entity-teleport-main"
+      })
+    ];
+
+    const interactionSystem = new RuntimeInteractionSystem();
+
+    expect(
+      interactionSystem.resolveClickInteractionPrompt(
+        {
+          x: 0,
+          y: 1.6,
+          z: 0
+        },
+        {
+          x: 0,
+          y: 1.6,
+          z: -2
+        },
+        {
+          x: 0,
+          y: 0,
+          z: 1
+        },
+        runtimeScene
+      )
+    ).toEqual({
+      sourceEntityId: "entity-interactable-console",
+      prompt: "Use Console",
+      distance: expect.any(Number),
+      range: 2
+    });
+  });
+
   it("dispatches click actions for the targeted Interactable", () => {
     const runtimeScene = createRuntimeSceneFixture();
     runtimeScene.interactionLinks = [
@@ -483,6 +533,11 @@ describe("RuntimeInteractionSystem", () => {
           y: 1.6,
           z: 0
         },
+        {
+          x: 0,
+          y: 1.6,
+          z: 0
+        },
         {
           x: 0,
           y: 0,

tests/e2e/runtime-click-interaction.e2e.ts

@@ -2,70 +2,84 @@ import { expect, test } from "@playwright/test";
 
 import { clickViewport, setViewportCreationPreview } from "./viewport-test-helpers";
 
-test("Interactable click prompt can teleport the player in run mode", async ({ page }) => {
+for (const navigationMode of [
-  const pageErrors: string[] = [];
+  {
-  const consoleErrors: string[] = [];
+    buttonLabel: "First Person",
+    name: "first-person"
+  },
+  {
+    buttonLabel: "Third Person",
+    name: "third-person"
+  }
+] as const) {
+  test(`Interactable click prompt can teleport the player in ${navigationMode.name} run mode`, async ({ page }) => {
+    const pageErrors: string[] = [];
+    const consoleErrors: string[] = [];
 
-  page.on("pageerror", (error) => {
+    page.on("pageerror", (error) => {
-    pageErrors.push(error.message);
+      pageErrors.push(error.message);
+    });
+
+    page.on("console", (message) => {
+      if (message.type() === "error") {
+        consoleErrors.push(message.text());
+      }
+    });
+
+    await page.goto("/");
+    await page.evaluate((storageKey) => {
+      window.localStorage.removeItem(storageKey);
+    }, "webeditor3d.scene-document-draft");
+    await page.reload();
+
+    await page.getByTestId("outliner-add-button").click();
+    await page.getByTestId("add-menu-entities").click();
+    await page.getByTestId("add-menu-player-start").click();
+    await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "playerStart", audioAssetId: null }, { x: 0, y: 0, z: 0 });
+    await clickViewport(page, "topLeft");
+    await page.getByTestId("outliner-add-button").click();
+    await page.getByTestId("add-menu-entities").click();
+    await page.getByTestId("add-menu-interactable").click();
+    await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "interactable", audioAssetId: null }, { x: 0, y: 0, z: 0 });
+    await clickViewport(page, "topLeft");
+    await page.getByTestId("interactable-position-y").fill("1");
+    await page.getByTestId("interactable-position-y").press("Tab");
+    await page.getByTestId("interactable-position-z").fill("1");
+    await page.getByTestId("interactable-position-z").press("Tab");
+    await page.getByTestId("interactable-radius").fill("4");
+    await page.getByTestId("interactable-radius").press("Tab");
+    await page.getByTestId("interactable-prompt").fill("Use Console");
+    await page.getByTestId("interactable-prompt").press("Tab");
+
+    await page.getByTestId("outliner-add-button").click();
+    await page.getByTestId("add-menu-entities").click();
+    await page.getByTestId("add-menu-teleport-target").click();
+    await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "teleportTarget", audioAssetId: null }, { x: 0, y: 0, z: 0 });
+    await clickViewport(page, "topLeft");
+    await page.getByTestId("teleportTarget-position-x").fill("6");
+    await page.getByTestId("teleportTarget-position-x").press("Tab");
+
+    await page
+      .locator('[data-testid^="outliner-entity-"]')
+      .filter({ hasText: "Interactable" })
+      .first()
+      .click();
+
+    await page.getByTestId("add-interactable-teleport-link").click();
+    await page.getByRole("button", { name: navigationMode.buttonLabel }).first().click();
+    await page.getByTestId("enter-run-mode").click();
+
+    await expect(page.getByTestId("runner-shell")).toBeVisible();
+    await expect(page.getByTestId("runner-interaction-state")).toContainText(
+      "Ready"
+    );
+    await expect(page.getByTestId("runner-interaction-prompt")).toBeVisible();
+    await expect(page.getByTestId("runner-interaction-prompt-text")).toContainText("Use Console");
+
+    await page.locator('[data-testid="runner-shell"] canvas').click();
+    await expect(page.getByTestId("runner-player-position")).toContainText("6.00,");
+
+    expect(pageErrors).toEqual([]);
+    expect(consoleErrors).toEqual([]);
   });
-
+}
-  page.on("console", (message) => {
-    if (message.type() === "error") {
-      consoleErrors.push(message.text());
-    }
-  });
-
-  await page.goto("/");
-  await page.evaluate((storageKey) => {
-    window.localStorage.removeItem(storageKey);
-  }, "webeditor3d.scene-document-draft");
-  await page.reload();
-
-  await page.getByTestId("outliner-add-button").click();
-  await page.getByTestId("add-menu-entities").click();
-  await page.getByTestId("add-menu-player-start").click();
-  await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "playerStart", audioAssetId: null }, { x: 0, y: 0, z: 0 });
-  await clickViewport(page, "topLeft");
-  await page.getByTestId("outliner-add-button").click();
-  await page.getByTestId("add-menu-entities").click();
-  await page.getByTestId("add-menu-interactable").click();
-  await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "interactable", audioAssetId: null }, { x: 0, y: 0, z: 0 });
-  await clickViewport(page, "topLeft");
-  await page.getByTestId("interactable-position-y").fill("1");
-  await page.getByTestId("interactable-position-y").press("Tab");
-  await page.getByTestId("interactable-position-z").fill("1");
-  await page.getByTestId("interactable-position-z").press("Tab");
-  await page.getByTestId("interactable-radius").fill("4");
-  await page.getByTestId("interactable-radius").press("Tab");
-  await page.getByTestId("interactable-prompt").fill("Use Console");
-  await page.getByTestId("interactable-prompt").press("Tab");
-
-  await page.getByTestId("outliner-add-button").click();
-  await page.getByTestId("add-menu-entities").click();
-  await page.getByTestId("add-menu-teleport-target").click();
-  await setViewportCreationPreview(page, "topLeft", { kind: "entity", entityKind: "teleportTarget", audioAssetId: null }, { x: 0, y: 0, z: 0 });
-  await clickViewport(page, "topLeft");
-  await page.getByTestId("teleportTarget-position-x").fill("6");
-  await page.getByTestId("teleportTarget-position-x").press("Tab");
-
-  await page
-    .locator('[data-testid^="outliner-entity-"]')
-    .filter({ hasText: "Interactable" })
-    .first()
-    .click();
-
-  await page.getByTestId("add-interactable-teleport-link").click();
-  await page.getByRole("button", { name: "First Person" }).first().click();
-  await page.getByTestId("enter-run-mode").click();
-
-  await expect(page.getByTestId("runner-shell")).toBeVisible();
-  await expect(page.getByTestId("runner-interaction-prompt")).toBeVisible();
-  await expect(page.getByTestId("runner-interaction-prompt-text")).toContainText("Use Console");
-
-  await page.locator('[data-testid="runner-shell"] canvas').click();
-  await expect(page.getByTestId("runner-player-position")).toContainText("6.00,");
-
-  expect(pageErrors).toEqual([]);
-  expect(consoleErrors).toEqual([]);
-});

tests/unit/runner-canvas.test.tsx

@@ -329,7 +329,7 @@ describe("RunnerCanvas", () => {
     ).toHaveBeenCalledTimes(2);
   });
 
-  it("keeps first-person HUD affordances hidden in third-person mode", async () => {
+  it("keeps the crosshair hidden in third-person mode while still showing interaction prompts", async () => {
     const runtimeScene = buildRuntimeSceneFromDocument(
       createEmptySceneDocument()
     );
@@ -362,17 +362,33 @@ describe("RunnerCanvas", () => {
       ?.setSceneLoadStateHandler.mock.calls[0]?.[0] as
       | ((state: RuntimeSceneLoadState) => void)
       | undefined;
+    const publishInteractionPrompt = runtimeHostInstances[0]
+      ?.setInteractionPromptHandler.mock.calls[0]?.[0] as
+      | ((prompt: {
+          sourceEntityId: string;
+          prompt: string;
+          distance: number;
+          range: number;
+        } | null) => void)
+      | undefined;
 
     act(() => {
       publishSceneLoadState?.({
         status: "ready",
         message: null
       });
+      publishInteractionPrompt?.({
+        sourceEntityId: "entity-interactable-console",
+        prompt: "Use Console",
+        distance: 1.2,
+        range: 2
+      });
     });
 
     expect(document.querySelector(".runner-canvas__crosshair")).toBeNull();
-    expect(
+    expect(screen.getByTestId("runner-interaction-prompt")).toBeVisible();
-      screen.queryByTestId("runner-interaction-prompt")
+    expect(screen.getByTestId("runner-interaction-prompt-text")).toHaveTextContent(
-    ).toBeNull();
+      "Use Console"
+    );
   });
 });