From aabdcd8e09545824bf9616f104d3e4ad6537528e Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 31 Mar 2026 20:08:19 +0200
Subject: [PATCH] Update ViewportCanvas to support image background assets

---
 src/viewport-three/ViewportCanvas.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/viewport-three/ViewportCanvas.tsx b/src/viewport-three/ViewportCanvas.tsx
index fb6df044..f1d7134e 100644
--- a/src/viewport-three/ViewportCanvas.tsx
+++ b/src/viewport-three/ViewportCanvas.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import type { LoadedModelAsset } from "../assets/gltf-model-import";
+import type { LoadedImageAsset } from "../assets/image-assets";
 import type { ProjectAssetRecord } from "../assets/project-assets";
 import type { EditorSelection } from "../core/selection";
 import type { ToolMode } from "../core/tool-mode";
@@ -17,6 +18,7 @@ interface ViewportCanvasProps {
   sceneDocument: SceneDocument;
   projectAssets: Record<string, ProjectAssetRecord>;
   loadedModelAssets: Record<string, LoadedModelAsset>;
+  loadedImageAssets: Record<string, LoadedImageAsset>;
   selection: EditorSelection;
   toolMode: ToolMode;
   focusRequestId: number;
@@ -38,6 +40,7 @@ export function ViewportCanvas({
   sceneDocument,
   projectAssets,
   loadedModelAssets,
+  loadedImageAssets,
   selection,
   toolMode,
   focusRequestId,
@@ -90,8 +93,8 @@ export function ViewportCanvas({
   }, [world]);
 
   useEffect(() => {
-    hostRef.current?.updateAssets(projectAssets, loadedModelAssets);
-  }, [projectAssets, loadedModelAssets]);
+    hostRef.current?.updateAssets(projectAssets, loadedModelAssets, loadedImageAssets);
+  }, [projectAssets, loadedModelAssets, loadedImageAssets]);
 
   useEffect(() => {
     hostRef.current?.updateDocument(sceneDocument, selection);
@@ -131,7 +134,7 @@ export function ViewportCanvas({
       className={`viewport-canvas viewport-canvas--${toolMode}`}
       data-testid="viewport-shell"
       aria-label="Editor viewport"
-      style={createWorldBackgroundStyle(world.background)}
+      style={createWorldBackgroundStyle(world.background, world.background.mode === "image" ? loadedImageAssets[world.background.assetId]?.sourceUrl ?? null : null)}
     >
       <div className="viewport-canvas__overlay" data-testid="viewport-overlay">
         <div className="viewport-canvas__overlay-badge">{toolMode === "box-create" ? "Box Create" : "Select"}</div>