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

Enhance world background preview and add image mode support in App.tsx

Browse Source
This commit is contained in:
Victor Giers
2026-03-31 20:16:06 +02:00
parent 86466a5dfb
commit 2a50b0eaab
1 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/App.tsx
View File

@@ -3071,13 +3071,28 @@ export function App({ store, initialStatusMessage }: AppProps) {
<div
className="world-background-preview"
data-testid="world-background-preview"
style={createWorldBackgroundStyle(editorState.document.world.background)}
style={createWorldBackgroundStyle(
editorState.document.world.background,
editorState.document.world.background.mode === "image"
? loadedImageAssets[editorState.document.world.background.assetId]?.sourceUrl ?? null
: null
)}
/>
<div className="material-summary">
{editorState.document.world.background.mode === "solid"
? editorState.document.world.background.colorHex
: `${editorState.document.world.background.topColorHex} -> ${editorState.document.world.background.bottomColorHex}`}
: editorState.document.world.background.mode === "verticalGradient"
? `${editorState.document.world.background.topColorHex} -> ${editorState.document.world.background.bottomColorHex}`
: editorState.document.assets[editorState.document.world.background.assetId]?.sourceName ??
editorState.document.world.background.assetId}
</div>
{editorState.document.world.background.mode !== "image" ? null : (
<div className="material-summary" data-testid="world-background-asset-value">
Background Asset:{" "}
{editorState.document.assets[editorState.document.world.background.assetId]?.sourceName ??
editorState.document.world.background.assetId}
</div>
)}
</div>
<div className="form-section">
@@ -3101,6 +3116,14 @@ export function App({ store, initialStatusMessage }: AppProps) {
>
Gradient
</button>
<button
className={`toolbar__button ${editorState.document.world.background.mode === "image" ? "toolbar__button--active" : ""}`}
type="button"
data-testid="world-background-mode-image"
onClick={() => applyWorldBackgroundMode("image")}
>
Image
</button>
</div>
</div>