diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0ca7d3e4e..eed8bbe76 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -37,6 +37,7 @@
"fullstats",
"fuzzysort",
"gamemode",
+ "glsl",
"GLTF",
"immer",
"JOINTINDEX",
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx
index 73183d7de..d9d8e5076 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/TankDisplay.tsx
@@ -1,9 +1,16 @@
import {
EnterFullScreenIcon,
ExitFullScreenIcon,
- FrameIcon,
+ GearIcon,
} from '@radix-ui/react-icons';
-import { Button, Card, Flex, Tabs, Theme } from '@radix-ui/themes';
+import {
+ Button,
+ Card,
+ DropdownMenu,
+ Flex,
+ Tabs,
+ Theme,
+} from '@radix-ui/themes';
import { Html } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import { Suspense, use, useEffect, useRef, useState } from 'react';
@@ -29,6 +36,7 @@ export function TankDisplay() {
const [isFullScreen, setIsFullScreen] = useState(false);
const mode = useTankopedia((state) => state.mode);
const showGrid = useTankopedia((state) => state.model.showGrid);
+ const opaqueArmor = useTankopedia((state) => state.model.opaqueArmor);
const protagonist = useTankopedia((state) => {
if (!state.areTanksAssigned) return;
return state.protagonist;
@@ -147,17 +155,37 @@ export function TankDisplay() {
right: 18,
}}
>
-
+
+
+
+
+
+
+ {
+ mutateTankopedia((draft) => {
+ draft.model.showGrid = checked;
+ });
+ }}
+ >
+ Show grid
+
+
+ {
+ mutateTankopedia((draft) => {
+ draft.model.opaqueArmor = checked;
+ });
+ }}
+ >
+ Opaque armor
+
+
+