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

Update interaction prompt handling and UI text in multiple components

Browse Source
This commit is contained in:
Victor Giers
2026-04-11 11:41:08 +02:00
parent 43e9e7baa0
commit 279084c7be
5 changed files with 110 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/App.js
View File

@@ -3355,11 +3355,9 @@ export function App({ store, initialStatusMessage }) {
: firstPersonTelemetry?.locomotionState === "flying"
? "Flying"
: "Grounded"
: "n/a" })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Water Volume" }), _jsx("div", { className: "value", children: activeNavigationMode === "firstPerson" ? (firstPersonTelemetry?.inWaterVolume ? "inside" : "outside") : "n/a" })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Fog Volume" }), _jsx("div", { className: "value", children: activeNavigationMode === "firstPerson" ? (firstPersonTelemetry?.inFogVolume ? "inside" : "outside") : "n/a" })] })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "FPS Feet Position" }), _jsx("div", { className: "value", "data-testid": "runner-player-position", children: formatRunnerFeetPosition(firstPersonTelemetry?.feetPosition ?? runtimeScene.spawn.position) }), _jsxs("div", { className: "material-summary", "data-testid": "runner-spawn-state", children: ["Spawn: ", runtimeScene.spawn.source === "playerStart" ? "Player Start" : "Fallback", " at", " ", formatRunnerFeetPosition(runtimeScene.spawn.position)] })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Interaction" }), _jsx("div", { className: "value", "data-testid": "runner-interaction-state", children: activeNavigationMode === "firstPerson" ? (runtimeInteractionPrompt === null ? "No target" : "Ready") : "Not available" }), _jsx("div", { className: "material-summary", "data-testid": "runner-interaction-summary", children: activeNavigationMode === "firstPerson"
? runtimeInteractionPrompt === null
? "Aim at an authored Interactable and click when a prompt appears."
: `Click "${runtimeInteractionPrompt.prompt}" within ${runtimeInteractionPrompt.range.toFixed(1)}m.`
: "Switch to First Person to use click interactions." })] }), runtimeMessage === null ? null : _jsx("div", { className: "info-banner", children: runtimeMessage }), activeNavigationMode === "firstPerson" ? (_jsx("div", { className: "info-banner", "data-testid": "runner-interaction-help", children: "Mouse click activates the current prompt target. Keyboard/controller fallback is not active yet." })) : null] }) })] }), _jsxs("footer", { className: "status-bar", children: [_jsxs("div", { children: [_jsx("span", { className: "status-bar__strong", children: "Status:" }), " ", statusMessage] }), _jsxs("div", { children: [_jsx("span", { className: "status-bar__strong", children: "Spawn:" }), " ", runtimeScene.spawn.source === "playerStart" ? "Authored Player Start" : "Fallback runtime spawn"] })] })] }));
: "n/a" })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Water Volume" }), _jsx("div", { className: "value", children: activeNavigationMode === "firstPerson" ? (firstPersonTelemetry?.inWaterVolume ? "inside" : "outside") : "n/a" })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Fog Volume" }), _jsx("div", { className: "value", children: activeNavigationMode === "firstPerson" ? (firstPersonTelemetry?.inFogVolume ? "inside" : "outside") : "n/a" })] })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "FPS Feet Position" }), _jsx("div", { className: "value", "data-testid": "runner-player-position", children: formatRunnerFeetPosition(firstPersonTelemetry?.feetPosition ?? runtimeScene.spawn.position) }), _jsxs("div", { className: "material-summary", "data-testid": "runner-spawn-state", children: ["Spawn: ", runtimeScene.spawn.source === "playerStart" ? "Player Start" : "Fallback", " at", " ", formatRunnerFeetPosition(runtimeScene.spawn.position)] })] }), _jsxs("div", { className: "stat-card", children: [_jsx("div", { className: "label", children: "Interaction" }), _jsx("div", { className: "value", "data-testid": "runner-interaction-state", children: runtimeInteractionPrompt === null ? "No target" : "Ready" }), _jsx("div", { className: "material-summary", "data-testid": "runner-interaction-summary", children: 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.` })] }), runtimeMessage === null ? null : _jsx("div", { className: "info-banner", children: runtimeMessage }), _jsx("div", { className: "info-banner", "data-testid": "runner-interaction-help", children: "Mouse click activates the current prompt target. Keyboard/controller fallback is not active yet." })] }) })] }), _jsxs("footer", { className: "status-bar", children: [_jsxs("div", { children: [_jsx("span", { className: "status-bar__strong", children: "Status:" }), " ", statusMessage] }), _jsxs("div", { children: [_jsx("span", { className: "status-bar__strong", children: "Spawn:" }), " ", runtimeScene.spawn.source === "playerStart" ? "Authored Player Start" : "Fallback runtime spawn"] })] })] }));
}
return (_jsxs("div", { className: "app-shell", children: [_jsxs("header", { className: "toolbar", children: [_jsxs("label", { className: "toolbar__scene-name", children: [_jsx("span", { className: "visually-hidden", children: "Scene Name" }), _jsx("input", { "data-testid": "toolbar-scene-name", className: "text-input toolbar__scene-name-input", type: "text", value: sceneNameDraft, onChange: (event) => setSceneNameDraft(event.currentTarget.value), onBlur: applySceneName, onKeyDown: (event) => {
if (event.key === "Enter") {

2
src/runner-web/RunnerCanvas.js
View File

@@ -52,5 +52,5 @@ export function RunnerCanvas({ runtimeScene, projectAssets, loadedModelAssets, l
useEffect(() => {
hostRef.current?.setNavigationMode(navigationMode);
}, [navigationMode]);
return (_jsxs("div", { ref: containerRef, className: `runner-canvas ${navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? "runner-canvas--underwater" : ""}`, "data-testid": "runner-shell", "aria-label": "Built-in scene runner", style: createWorldBackgroundStyle(runtimeScene.world.background, runtimeScene.world.background.mode === "image" ? loadedImageAssets[runtimeScene.world.background.assetId]?.sourceUrl ?? null : null), children: [navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? _jsx("div", { className: "runner-canvas__underwater", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" ? _jsx("div", { className: "runner-canvas__crosshair", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" && interactionPrompt !== null ? (_jsxs("div", { className: "runner-canvas__prompt", "data-testid": "runner-interaction-prompt", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "runner-canvas__prompt-badge", children: "Click" }), _jsx("div", { className: "runner-canvas__prompt-text", "data-testid": "runner-interaction-prompt-text", children: interactionPrompt.prompt }), _jsxs("div", { className: "runner-canvas__prompt-meta", "data-testid": "runner-interaction-prompt-meta", children: [interactionPrompt.distance.toFixed(1), "m away \u00B7 ", interactionPrompt.range.toFixed(1), "m range"] })] })) : null, runnerMessage === null ? null : (_jsxs("div", { className: "runner-canvas__fallback", role: "status", children: [_jsx("div", { className: "runner-canvas__fallback-title", children: "Runner Unavailable" }), _jsx("div", { children: runnerMessage })] }))] }));
return (_jsxs("div", { ref: containerRef, className: `runner-canvas ${navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? "runner-canvas--underwater" : ""}`, "data-testid": "runner-shell", "aria-label": "Built-in scene runner", style: createWorldBackgroundStyle(runtimeScene.world.background, runtimeScene.world.background.mode === "image" ? loadedImageAssets[runtimeScene.world.background.assetId]?.sourceUrl ?? null : null), children: [navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? _jsx("div", { className: "runner-canvas__underwater", "aria-hidden": "true" }) : null, navigationMode === "firstPerson" ? _jsx("div", { className: "runner-canvas__crosshair", "aria-hidden": "true" }) : null, interactionPrompt !== null ? (_jsxs("div", { className: "runner-canvas__prompt", "data-testid": "runner-interaction-prompt", role: "status", "aria-live": "polite", children: [_jsx("div", { className: "runner-canvas__prompt-badge", children: "Click" }), _jsx("div", { className: "runner-canvas__prompt-text", "data-testid": "runner-interaction-prompt-text", children: interactionPrompt.prompt }), _jsxs("div", { className: "runner-canvas__prompt-meta", "data-testid": "runner-interaction-prompt-meta", children: [interactionPrompt.distance.toFixed(1), "m away \u00B7 ", interactionPrompt.range.toFixed(1), "m range"] })] })) : null, runnerMessage === null ? null : (_jsxs("div", { className: "runner-canvas__fallback", role: "status", children: [_jsx("div", { className: "runner-canvas__fallback-title", children: "Runner Unavailable" }), _jsx("div", { children: runnerMessage })] }))] }));
}

44
src/runtime-three/runtime-host.js
View File

@@ -861,14 +861,9 @@ export class RuntimeHost {
for (const mixer of this.animationMixers.values()) {
mixer.update(dt);
}
if (this.runtimeScene !== null && this.activeController === this.firstPersonController && this.currentFirstPersonTelemetry !== null) {
if (this.sceneReady && this.runtimeScene !== null && this.currentFirstPersonTelemetry !== null) {
this.interactionSystem.updatePlayerPosition(this.currentFirstPersonTelemetry.feetPosition, this.runtimeScene, this.createInteractionDispatcher());
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));
this.setInteractionPrompt(this.resolveInteractionPrompt());
}
else {
this.setInteractionPrompt(null);
@@ -885,8 +880,11 @@ export class RuntimeHost {
this.renderer?.render(this.scene, this.camera);
};
applyTeleportPlayerAction(target) {
if (this.activeController === this.thirdPersonController) {
this.thirdPersonController.teleportTo(target.position, target.yawDegrees);
return;
}
this.firstPersonController.teleportTo(target.position, target.yawDegrees);
this.volumeAnimatedUniforms.length = 0;
}
applyToggleBrushVisibilityAction(brushId, visible) {
const mesh = this.brushMeshes.get(brushId);
@@ -954,11 +952,37 @@ export class RuntimeHost {
this.currentInteractionPrompt = prompt;
this.interactionPromptHandler?.(prompt);
}
resolveInteractionPrompt() {
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);
}
handleRuntimeClick = () => {
this.audioSystem.handleUserGesture();
if (this.runtimeScene === null || this.activeController !== this.firstPersonController || this.currentInteractionPrompt === null) {
if (!this.sceneReady ||
this.runtimeScene === null ||
(this.activeController !== this.firstPersonController &&
this.activeController !== this.thirdPersonController) ||
this.currentInteractionPrompt === null) {
return;
}
this.audioSystem.handleUserGesture();
this.interactionSystem.dispatchClickInteraction(this.currentInteractionPrompt.sourceEntityId, this.runtimeScene, this.createInteractionDispatcher());
};
handleRuntimePointerDown = () => {

8
src/runtime-three/runtime-interaction-system.js
View File

@@ -90,8 +90,8 @@ export class RuntimeInteractionSystem {
}
}
}
resolveClickInteractionPrompt(viewOrigin, viewDirection, runtimeScene) {
const normalizedViewDirection = normalizeVec3(viewDirection);
resolveClickInteractionPrompt(interactionOrigin, rayOrigin, rayDirection, runtimeScene) {
const normalizedViewDirection = normalizeVec3(rayDirection);
if (normalizedViewDirection === null) {
return null;
}
@@ -101,11 +101,11 @@ export class RuntimeInteractionSystem {
if (!interactable.enabled || !hasTriggerLinks(runtimeScene, interactable.entityId, "click")) {
continue;
}
const distance = distanceBetweenVec3(viewOrigin, interactable.position);
const distance = distanceBetweenVec3(interactionOrigin, interactable.position);
if (distance > interactable.radius) {
continue;
}
const hitDistance = raySphereHitDistance(viewOrigin, normalizedViewDirection, interactable.position, getInteractableTargetRadius(interactable));
const hitDistance = raySphereHitDistance(rayOrigin, normalizedViewDirection, interactable.position, getInteractableTargetRadius(interactable));
if (hitDistance === null) {
continue;
}

124
tests/e2e/runtime-click-interaction.e2e.js
View File

@@ -1,59 +1,71 @@
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 }) => {
const pageErrors = [];
const consoleErrors = [];
page.on("pageerror", (error) => {
pageErrors.push(error.message);
for (const navigationMode of [
{
buttonLabel: "First Person",
name: "first-person"
},
{
buttonLabel: "Third Person",
name: "third-person"
}
]) {
test(`Interactable click prompt can teleport the player in ${navigationMode.name} run mode`, async ({ page }) => {
const pageErrors = [];
const consoleErrors = [];
page.on("pageerror", (error) => {
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([]);
});
}