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

Update ViewportCanvas to support image background assets

Browse Source
This commit is contained in:
Victor Giers
2026-03-31 20:08:19 +02:00
parent 094b9c34dc
commit aabdcd8e09
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/viewport-three/ViewportCanvas.tsx
View File

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