Enhance interaction prompt by calculating and using three directional rays (center, left, right)

src/app/App.tsx

@@ -297,6 +297,7 @@ import {
   DEFAULT_PLAYER_START_CAPSULE_HEIGHT,
   DEFAULT_PLAYER_START_CAPSULE_RADIUS,
   DEFAULT_PLAYER_START_EYE_HEIGHT,
+  DEFAULT_PLAYER_START_INTERACTION_REACH_METERS,
   DEFAULT_PLAYER_START_NAVIGATION_MODE,
   PLAYER_START_MOVEMENT_TEMPLATE_KINDS,
   DEFAULT_SOUND_EMITTER_AUDIO_ASSET_ID,
@@ -2730,6 +2731,8 @@ export function App({ store, initialStatusMessage }: AppProps) {
   const [playerStartYawDraft, setPlayerStartYawDraft] = useState("0");
   const [playerStartNavigationModeDraft, setPlayerStartNavigationModeDraft] =
     useState<PlayerStartNavigationMode>(DEFAULT_PLAYER_START_NAVIGATION_MODE);
+  const [playerStartInteractionReachDraft, setPlayerStartInteractionReachDraft] =
+    useState(String(DEFAULT_PLAYER_START_INTERACTION_REACH_METERS));
   const [
     playerStartMovementTemplateDraft,
     setPlayerStartMovementTemplateDraft
@@ -3782,6 +3785,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
       case "playerStart":
         setPlayerStartYawDraft(String(selectedEntity.yawDegrees));
         setPlayerStartNavigationModeDraft(selectedEntity.navigationMode);
+        setPlayerStartInteractionReachDraft(
+          String(selectedEntity.interactionReachMeters)
+        );
         setPlayerStartMovementTemplateDraft(
           clonePlayerStartMovementTemplate(selectedEntity.movementTemplate)
         );

src/runtime-three/runtime-host.ts

@@ -5648,15 +5648,48 @@ export class RuntimeHost {
             z: this.camera.position.z
           }
         : interactionOrigin;
+    const interactionReachMeters =
+      this.runtimeScene.playerStart?.interactionReachMeters ??
+      DEFAULT_PLAYER_START_INTERACTION_REACH_METERS;
+    const centerDirection = new Vector3(
+      this.cameraForward.x,
+      this.cameraForward.y,
+      this.cameraForward.z
+    ).normalize();
+    const leftDirection = centerDirection
+      .clone()
+      .applyAxisAngle(
+        new Vector3(0, 1, 0),
+        INTERACTION_PROMPT_SIDE_RAY_ANGLE_RADIANS
+      );
+    const rightDirection = centerDirection
+      .clone()
+      .applyAxisAngle(
+        new Vector3(0, 1, 0),
+        -INTERACTION_PROMPT_SIDE_RAY_ANGLE_RADIANS
+      );
 
     return this.interactionSystem.resolveClickInteractionPrompt(
       interactionOrigin,
       rayOrigin,
-      {
-        x: this.cameraForward.x,
-        y: this.cameraForward.y,
-        z: this.cameraForward.z
-      },
+      [
+        {
+          x: centerDirection.x,
+          y: centerDirection.y,
+          z: centerDirection.z
+        },
+        {
+          x: leftDirection.x,
+          y: leftDirection.y,
+          z: leftDirection.z
+        },
+        {
+          x: rightDirection.x,
+          y: rightDirection.y,
+          z: rightDirection.z
+        }
+      ],
+      interactionReachMeters,
       this.runtimeScene
     );
   }