feat: show environment

src/app/tools/tankopedia/[id]/components/Lighting.tsx

@@ -1,14 +1,18 @@
 import { Environment } from '@react-three/drei';
 import { useModel } from '../../../../../hooks/useModel';
 import { useDuel } from '../../../../../stores/duel';
+import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
 
 export function Lighting() {
   const protagonist = useDuel((state) => state.protagonist!);
   const { hasPbr } = useModel(protagonist.tank.id);
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
 
   return (
     <>
-      <Environment preset="warehouse" />
+      <Environment preset="warehouse" background={showEnvironment} blur={0} />
       <directionalLight
         position={[1, 1, -1]}
         intensity={hasPbr ? 1 : 5}

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -8,7 +8,6 @@ import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import { RefObject } from 'react';
 import { Pose, poseEvent } from '../../../../../../../core/blitzkrieg/pose';
 import mutateTankopediaPersistent, {
-  mutateTankopediaTemporary,
   useTankopediaPersistent,
 } from '../../../../../../../stores/tankopedia';
 
@@ -21,6 +20,9 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
   const greenPenetration = useTankopediaPersistent(
     (state) => state.model.visual.greenPenetration,
   );
@@ -87,6 +89,16 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
           >
             Green penetration
           </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showEnvironment}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.showEnvironment = checked;
+              });
+            }}
+          >
+            Show environment
+          </DropdownMenu.CheckboxItem>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
 

src/app/tools/tankopedia/[id]/components/SceneProps.tsx

@@ -6,8 +6,11 @@ export function SceneProps() {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
 
-  if (!showGrid) return null;
+  if (!showGrid || showEnvironment) return null;
 
   return (
     <>

src/stores/tankopedia.ts

@@ -32,6 +32,7 @@ interface TankopediaPersistent {
       controlsEnabled: boolean;
       showGrid: boolean;
       greenPenetration: boolean;
+      showEnvironment: boolean;
     };
   };
   sort: {
@@ -76,6 +77,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
           controlsEnabled: true,
           showGrid: true,
           greenPenetration: false,
+          showEnvironment: false,
         },
       },
       sort: {