feat: more muted colors

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

@@ -1,5 +1,7 @@
-import { useLoader } from '@react-three/fiber';
-import { TextureLoader } from 'three';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { clamp } from 'lodash';
+import { useRef } from 'react';
+import { MeshStandardMaterial, TextureLoader } from 'three';
 import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
 
 export function SceneProps() {
@@ -7,14 +9,22 @@ export function SceneProps() {
     (state) =>
       state.model.visual.showGrid && !state.model.visual.showEnvironment,
   );
-  const texture = useLoader(TextureLoader, 'https://i.imgur.com/6QjSn1e.png');
+  const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png');
+  const material = useRef<MeshStandardMaterial>(null);
+
+  useFrame(({ camera }) => {
+    if (!material.current) return;
+    material.current.opacity = clamp(0.1 * camera.position.y, 0, 1);
+  });
+
+  texture.anisotropy = 2;
 
   if (!show) return null;
 
   return (
     <mesh rotation={[-Math.PI / 2, 0, 0]}>
       <planeGeometry args={[10, 10]} />
-      <meshBasicMaterial map={texture} transparent />
+      <meshStandardMaterial ref={material} map={texture} transparent />
     </mesh>
   );
 }