query params and some fog stuff

app/Sky.tsx

@@ -184,8 +184,8 @@ export function Sky({ object }: { object: ConsoleObject }) {
         <fog
           attach="fog"
           color={fogColor[1]}
-          near={fogDistance / 2}
+          near={100}
-          far={fogDistance * 2}
+          far={Math.max(400, fogDistance * 2)}
         />
       ) : null}
     </>

app/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Mission } from "./Mission";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -8,14 +8,31 @@ import { InspectorControls } from "./InspectorControls";
 import { SettingsProvider } from "./SettingsProvider";
 import { PerspectiveCamera } from "@react-three/drei";
 import { EffectComposer, N8AO } from "@react-three/postprocessing";
+import { useSearchParams, useRouter } from "next/navigation";
 
 // three.js has its own loaders for textures and models, but we need to load other
 // stuff too, e.g. missions, terrains, and more. This client is used for those.
 const queryClient = new QueryClient();
 
 export default function HomePage() {
-  const [missionName, setMissionName] = useState("TWL2_WoodyMyrk");
+  const searchParams = useSearchParams();
-  const [fogEnabled, setFogEnabled] = useState(false);
+  const router = useRouter();
+
+  // Initialize state from query params
+  const [missionName, setMissionName] = useState(
+    searchParams.get("mission") || "TWL2_WoodyMyrk"
+  );
+  const [fogEnabled, setFogEnabled] = useState(
+    searchParams.get("fog") === "true"
+  );
+
+  // Update query params when state changes
+  useEffect(() => {
+    const params = new URLSearchParams();
+    params.set("mission", missionName);
+    params.set("fog", String(fogEnabled));
+    router.replace(`?${params.toString()}`, { scroll: false });
+  }, [missionName, fogEnabled, router]);
 
   return (
     <SettingsProvider fogEnabled={fogEnabled}>