From cf08062defbce5b1d5dfd65c10306f2edcc67e26 Mon Sep 17 00:00:00 2001
From: tom-boullay <tom.boullay@bedrockstreaming.com>
Date: Thu, 21 May 2026 12:10:31 +0200
Subject: [PATCH] refactor(world): restore sky fallback chain

---
 src/components/three/world/SkyModel.tsx | 15 ++++++++++++---
 src/data/world/environmentConfig.ts     |  3 ++-
 src/world/Environment.tsx               |  2 ++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/three/world/SkyModel.tsx b/src/components/three/world/SkyModel.tsx
index 43e7c76..00be19d 100644
--- a/src/components/three/world/SkyModel.tsx
+++ b/src/components/three/world/SkyModel.tsx
@@ -6,6 +6,7 @@ import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
 
 interface SkyModelProps {
   modelPath: string;
+  fallbackColor?: string | undefined;
   fallbackModelPath?: string | undefined;
   fallbackScale?: number | undefined;
   scale?: number | undefined;
@@ -27,7 +28,7 @@ interface SkyModelErrorBoundaryState {
 
 const SKY_MODEL_SCALE = 1;
 const SKY_MODEL_RENDER_ORDER = -1000;
-const SKYBOX_MODEL_PATH = "/models/skybox/skybox.glb";
+const SKYBOX_MODEL_PATH = "/models/skybox/model.gltf";
 const LEGACY_SKY_MODEL_PATH = "/models/sky/model.glb";
 
 class SkyModelErrorBoundary extends Component<
@@ -53,14 +54,22 @@ class SkyModelErrorBoundary extends Component<
 }
 
 export function SkyModel({
+  fallbackColor,
   fallbackModelPath,
   fallbackScale = SKY_MODEL_SCALE,
   modelPath,
   scale = SKY_MODEL_SCALE,
 }: SkyModelProps): React.JSX.Element {
-  const fallback = fallbackModelPath ? (
-    <SkyModelContent modelPath={fallbackModelPath} scale={fallbackScale} />
+  const colorFallback = fallbackColor ? (
+    <color attach="background" args={[fallbackColor]} />
   ) : null;
+  const fallback = fallbackModelPath ? (
+    <SkyModelErrorBoundary key={fallbackModelPath} fallback={colorFallback}>
+      <SkyModelContent modelPath={fallbackModelPath} scale={fallbackScale} />
+    </SkyModelErrorBoundary>
+  ) : (
+    colorFallback
+  );
 
   return (
     <SkyModelErrorBoundary key={modelPath} fallback={fallback}>
diff --git a/src/data/world/environmentConfig.ts b/src/data/world/environmentConfig.ts
index 82329d1..2fb04b5 100644
--- a/src/data/world/environmentConfig.ts
+++ b/src/data/world/environmentConfig.ts
@@ -1,5 +1,6 @@
-export const GAME_SCENE_SKY_MODEL_PATH = "/models/skybox/skybox.glb";
+export const GAME_SCENE_SKY_MODEL_PATH = "/models/skybox/model.gltf";
 export const GAME_SCENE_FALLBACK_SKY_MODEL_PATH = "/models/sky/model.glb";
 export const GAME_SCENE_SKY_MODEL_SCALE = 100;
 export const GAME_SCENE_FALLBACK_SKY_MODEL_SCALE = 1;
+export const GAME_SCENE_FALLBACK_BACKGROUND_COLOR = "#0b1018";
 export const PHYSICS_SCENE_BACKGROUND_COLOR = "#0b1018";
diff --git a/src/world/Environment.tsx b/src/world/Environment.tsx
index a9a7627..ab9d53d 100644
--- a/src/world/Environment.tsx
+++ b/src/world/Environment.tsx
@@ -1,4 +1,5 @@
 import {
+  GAME_SCENE_FALLBACK_BACKGROUND_COLOR,
   GAME_SCENE_FALLBACK_SKY_MODEL_PATH,
   GAME_SCENE_FALLBACK_SKY_MODEL_SCALE,
   GAME_SCENE_SKY_MODEL_PATH,
@@ -19,6 +20,7 @@ export function Environment(): React.JSX.Element {
 
   return (
     <SkyModel
+      fallbackColor={GAME_SCENE_FALLBACK_BACKGROUND_COLOR}
       fallbackModelPath={GAME_SCENE_FALLBACK_SKY_MODEL_PATH}
       fallbackScale={GAME_SCENE_FALLBACK_SKY_MODEL_SCALE}
       modelPath={GAME_SCENE_SKY_MODEL_PATH}