From 0d4b61993cba37c180ac91e40a0fb362711de8de Mon Sep 17 00:00:00 2001 From: Ruben Beltran del Rio Date: Fri, 30 Jan 2026 11:31:24 +0100 Subject: Initial implementation --- src/components/SceneBackground.tsx | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/SceneBackground.tsx (limited to 'src/components/SceneBackground.tsx') diff --git a/src/components/SceneBackground.tsx b/src/components/SceneBackground.tsx new file mode 100644 index 0000000..c2dd2e2 --- /dev/null +++ b/src/components/SceneBackground.tsx @@ -0,0 +1,33 @@ +import React, { useEffect } from "react"; +import { useThree } from "@react-three/fiber"; +import * as THREE from "three"; +import { useStore } from "../store/store.ts"; + +const textureLoader = new THREE.TextureLoader(); + +const SceneBackgroundInner: React.FC = () => { + const backdropUrl = useStore((state) => state.backdropUrl); + const { scene } = useThree(); + + useEffect(() => { + if (backdropUrl) { + textureLoader.load(backdropUrl, (texture) => { + texture.colorSpace = THREE.SRGBColorSpace; + scene.background = texture; + }); + } else { + scene.background = new THREE.Color(0x4a4a4a); + } + + return () => { + if (scene.background instanceof THREE.Texture) { + scene.background.dispose(); + } + }; + }, [backdropUrl, scene]); + + return null; +}; + +export const SceneBackground = React.memo(SceneBackgroundInner); +SceneBackground.displayName = "SceneBackground"; -- cgit