giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify interaction prompt display and handling in various components

Browse Source
This commit is contained in:
Victor Giers
2026-04-11 11:39:33 +02:00
parent 9026a34c72
commit 43e9e7baa0
7 changed files with 212 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/App.tsx
View File

@@ -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"
: "Not available"}
{runtimeInteractionPrompt === null ? "No target" : "Ready"}
</div>
<div
className="material-summary"
data-testid="runner-interaction-summary"
>
{activeNavigationMode === "firstPerson"
? runtimeInteractionPrompt === null
? "Aim at an authored Interactable or Scene Exit and click when a prompt appears."
: `Click "${runtimeInteractionPrompt.prompt}" within ${runtimeInteractionPrompt.range.toFixed(1)}m.`
: "Switch to First Person to use click interactions."}
{runtimeInteractionPrompt === null
? "Aim at an authored Interactable or Scene Exit and click when a prompt appears."
: `Click "${runtimeInteractionPrompt.prompt}" within ${runtimeInteractionPrompt.range.toFixed(1)}m.`}
</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>

4
src/runner-web/RunnerCanvas.tsx
View File

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

54
src/runtime-three/runtime-host.ts
View File

@@ -1571,22 +1571,7 @@ export class RuntimeHost {
this.createInteractionDispatcher()
);
if (this.activeController === this.firstPersonController) {
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);
}
this.setInteractionPrompt(this.resolveInteractionPrompt());
} 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;

20
src/runtime-three/runtime-interaction-system.ts
View File

@@ -178,8 +178,13 @@ export class RuntimeInteractionSystem {
}
}
resolveClickInteractionPrompt(viewOrigin: Vec3, viewDirection: Vec3, runtimeScene: RuntimeSceneDefinition): RuntimeInteractionPrompt | null {
const normalizedViewDirection = normalizeVec3(viewDirection);
resolveClickInteractionPrompt(
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)