feat: some simplification

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -104,6 +104,7 @@ export function Lighting() {
             castShadow={highGraphics}
             decay={1}
             color="#ffffff"
+            angle={0}
           />
         );
       })}

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/index.tsx

@@ -174,6 +174,8 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           outline: naked ? "1rem red solid" : undefined,
         }}
       >
+        <Lighting />
+
         {!naked && <SceneProps />}
         {(display === TankopediaDisplay.Model ||
           (display === TankopediaDisplay.DynamicArmor &&
@@ -190,7 +192,6 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           {display === TankopediaDisplay.StaticArmor && (
             <StaticArmor thicknessRange={thicknessRange} />
           )}
-          <Lighting />
         </Suspense>
 
         <InitialAligner />

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex } from "@radix-ui/themes";
 import { times } from "lodash-es";
-import { Suspense, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
 import { useFullScreen } from "../../../hooks/useFullScreen";
 import { Duel } from "../../../stores/duel";
@@ -120,30 +120,17 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           position="relative"
         >
           <Box position="absolute" width="100%" height="100%" overflow="hidden">
+            <Box width="100%" height="100%" position="relative">
               <Box
+                position="absolute"
                 width="100%"
                 height="100%"
-              position="relative"
+                top="0"
-              style={{
+                left="0"
-                transitionDuration: "1s",
-              }}
               >
-              <Box
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  transitionDuration: "2s",
-                  opacity: revealed ? 1 : 0,
-                  filter: disturbed
-                    ? undefined
-                    : `drop-shadow(0 1rem 1rem black)`,
-                }}
-              >
-                <Suspense>
                 {!skeleton && (
                   <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
                 )}
-                </Suspense>
               </Box>
             </Box>