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 ? (
+  const colorFallback = fallbackColor ? (
-    <SkyModelContent modelPath={fallbackModelPath} scale={fallbackScale} />
+    <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}>

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";

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}