feat: static grid

package.json

@@ -25,7 +25,8 @@
     "lint:version": "vite-node --script scripts/checkVersionMissMatch",
     "knip": "knip",
     "update": "yarn upgrade --latest",
-    "setup:depotdownloader": "vite-node --script scripts/setupDepotDownloader"
+    "setup:depotdownloader": "vite-node --script scripts/setupDepotDownloader",
+    "tunnel": "cloudflared tunnel --url http://localhost:3000"
   },
   "license": "MIT",
   "dependencies": {

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

@@ -1,32 +1,20 @@
-import { Color } from 'three';
+import { useLoader } from '@react-three/fiber';
-import InfiniteGridHelper from '../../../../../components/InfiniteGridHelper';
+import { TextureLoader } from 'three';
 import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
 
 export function SceneProps() {
-  const showGrid = useTankopediaPersistent(
+  const show = useTankopediaPersistent(
-    (state) => state.model.visual.showGrid,
+    (state) =>
-  );
+      state.model.visual.showGrid && !state.model.visual.showEnvironment,
-  const showEnvironment = useTankopediaPersistent(
-    (state) => state.model.visual.showEnvironment,
   );
+  const texture = useLoader(TextureLoader, 'https://i.imgur.com/6QjSn1e.png');
 
-  if (!showGrid || showEnvironment) return null;
+  if (!show) return null;
 
   return (
-    <>
+    <mesh rotation={[-Math.PI / 2, 0, 0]}>
-      <InfiniteGridHelper
+      <planeGeometry args={[10, 10]} />
-        size1={1 / 5}
+      <meshBasicMaterial map={texture} transparent />
-        size2={1}
+    </mesh>
-        distance={20}
-        color={new Color('#ffffff')}
-      />
-      <InfiniteGridHelper
-        position={[0, 1e-4, 0]}
-        size1={0}
-        size2={100}
-        distance={25}
-        color={new Color('red')}
-      />
-    </>
   );
 }

src/components/InfiniteGridHelper.tsx

@@ -1,76 +0,0 @@
-import { MeshProps } from '@react-three/fiber';
-import { forwardRef } from 'react';
-import { DoubleSide, Mesh } from 'three';
-
-interface InfiniteGridHelperProps extends MeshProps {
-  size1?: number;
-  size2?: number;
-  color?: THREE.Color;
-  distance?: number;
-}
-/**
- * Thanks, Fyrestar, for [THREE.InfiniteGridHelper](https://github.com/Fyrestar/THREE.InfiniteGridHelper/)!
- */
-const InfiniteGridHelper = forwardRef<Mesh, InfiniteGridHelperProps>(
-  ({ size1, size2, color, distance, ...props }, ref) => {
-    return (
-      <mesh {...props} ref={ref} frustumCulled={false}>
-        <shaderMaterial
-          args={[
-            {
-              side: DoubleSide,
-              uniforms: {
-                uSize1: { value: size1 },
-                uSize2: { value: size2 },
-                uColor: { value: color },
-                uDistance: { value: distance },
-              },
-              extensions: { derivatives: true },
-              transparent: true,
-
-              vertexShader: `
-                varying vec3 worldPosition;
-                uniform float uDistance;
-
-                void main() {
-                  vec3 pos = position.xzy * uDistance;
-                  worldPosition = pos;
-                  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
-                }
-              `,
-
-              fragmentShader: `
-                varying vec3 worldPosition;
-                uniform float uSize1;
-                uniform float uSize2;
-                uniform vec3 uColor;
-                uniform float uDistance;
-                vec2 origin = vec2(0.0, 0.0);
-
-                float getGrid(float size) {
-                  vec2 r = worldPosition.xz / size;
-                  vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
-                  float line = min(grid.x, grid.y);
-
-                  return (1.0 - min(line, 1.0)) * max(0.0, min(1.0, cameraPosition.y / 5.0));
-                }
-
-                void main() {
-                  float d = 1.0 - min(distance(origin, worldPosition.xz) / uDistance, 1.0);
-                  float g1 = getGrid(uSize1);
-                  float g2 = getGrid(uSize2);
-                  gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 10.0));
-                  gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
-
-                  if ( gl_FragColor.a <= 0.0 ) discard;
-                }
-              `,
-            },
-          ]}
-        />
-        <planeGeometry />
-      </mesh>
-    );
-  },
-);
-export default InfiniteGridHelper;