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

Update RunnerCanvas to use cameraSubmerged for underwater overlay and add tests

Browse Source
This commit is contained in:
Victor Giers
2026-04-07 05:29:41 +02:00
parent b062b2beea
commit 0826cc78bb
6 changed files with 130 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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?.inWaterVolume ? "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?.inWaterVolume ? _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, 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 })] }))] }));
}

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

@@ -92,7 +92,7 @@ export function RunnerCanvas({
return (
<div
ref={containerRef}
className={`runner-canvas ${navigationMode === "firstPerson" && firstPersonTelemetry?.inWaterVolume ? "runner-canvas--underwater" : ""}`}
className={`runner-canvas ${navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? "runner-canvas--underwater" : ""}`}
data-testid="runner-shell"
aria-label="Built-in scene runner"
style={createWorldBackgroundStyle(
@@ -100,7 +100,7 @@ export function RunnerCanvas({
runtimeScene.world.background.mode === "image" ? loadedImageAssets[runtimeScene.world.background.assetId]?.sourceUrl ?? null : null
)}
>
{navigationMode === "firstPerson" && firstPersonTelemetry?.inWaterVolume ? <div className="runner-canvas__underwater" aria-hidden="true" /> : null}
{navigationMode === "firstPerson" && firstPersonTelemetry?.cameraSubmerged ? <div className="runner-canvas__underwater" aria-hidden="true" /> : null}
{navigationMode === "firstPerson" ? <div className="runner-canvas__crosshair" aria-hidden="true" /> : null}
{navigationMode === "firstPerson" && interactionPrompt !== null ? (
<div className="runner-canvas__prompt" data-testid="runner-interaction-prompt" role="status" aria-live="polite">

5
src/runtime-three/first-person-navigation-controller.js
View File

@@ -176,14 +176,17 @@ export class FirstPersonNavigationController {
if (this.context === null) {
return;
}
const eyePosition = toEyePosition(this.feetPosition, getFirstPersonPlayerEyeHeight(this.context.getRuntimeScene().playerCollider));
const cameraVolumeState = this.context.resolvePlayerVolumeState(eyePosition);
this.context.setFirstPersonTelemetry({
feetPosition: {
...this.feetPosition
},
eyePosition: toEyePosition(this.feetPosition, getFirstPersonPlayerEyeHeight(this.context.getRuntimeScene().playerCollider)),
eyePosition,
grounded: this.grounded,
locomotionState: this.locomotionState,
inWaterVolume: this.inWaterVolume,
cameraSubmerged: cameraVolumeState.inWater,
inFogVolume: this.inFogVolume,
pointerLocked: this.pointerLocked,
spawn: this.context.getRuntimeScene().spawn

6
src/runtime-three/first-person-navigation-controller.ts
View File

@@ -209,14 +209,18 @@ export class FirstPersonNavigationController implements NavigationController {
return;
}
const eyePosition = toEyePosition(this.feetPosition, getFirstPersonPlayerEyeHeight(this.context.getRuntimeScene().playerCollider));
const cameraVolumeState = this.context.resolvePlayerVolumeState(eyePosition);
this.context.setFirstPersonTelemetry({
feetPosition: {
...this.feetPosition
},
eyePosition: toEyePosition(this.feetPosition, getFirstPersonPlayerEyeHeight(this.context.getRuntimeScene().playerCollider)),
eyePosition,
grounded: this.grounded,
locomotionState: this.locomotionState,
inWaterVolume: this.inWaterVolume,
cameraSubmerged: cameraVolumeState.inWater,
inFogVolume: this.inFogVolume,
pointerLocked: this.pointerLocked,
spawn: this.context.getRuntimeScene().spawn

1
src/runtime-three/navigation-controller.ts
View File

@@ -11,6 +11,7 @@ export interface FirstPersonTelemetry {
grounded: boolean;
locomotionState: RuntimeLocomotionState;
inWaterVolume: boolean;
cameraSubmerged: boolean;
inFogVolume: boolean;
pointerLocked: boolean;
spawn: RuntimeSpawnPoint;