feat: start of selector

packages/website/src/components/MixerScene/components/Model.tsx

@@ -1,7 +1,9 @@
+import { Html } from "@react-three/drei";
 import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import { useModel } from "../../../hooks/useModel";
 import { Mixer } from "../../../stores/mixer";
+import { Selector } from "./Selector";
 
 const modelDefinitions = await awaitableModelDefinitions;
 
@@ -48,6 +50,28 @@ export function Model() {
         });
       })}
 
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          (trackModel.origin.y + tankModel.turret_origin.y) / 2,
+        ]}
+      >
+        <Selector>test hull</Selector>
+      </Html>
+
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          trackModel.origin.y +
+            tankModel.turret_origin.y +
+            turretModel.gun_origin.y,
+        ]}
+      >
+        <Selector>test turret</Selector>
+      </Html>
+
       <group
         position={[
           tankModel.turret_origin.x +

packages/website/src/components/MixerScene/components/Selector.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function Selector({ children }: Props) {
+  return (
+    <Flex align="center">
+      <Box
+        width="16rem"
+        height="1px"
+        style={{ backgroundColor: "var(--gray-12)" }}
+      />
+      <Box
+        style={{
+          padding: "var(--space-3)",
+          backgroundColor: "var(--gray-3)",
+          borderRadius: "var(--radius-3)",
+          boxShadow: "var(--shadow-3)",
+        }}
+      >
+        <Text style={{ whiteSpace: "nowrap" }}>{children}</Text>
+      </Box>
+    </Flex>
+  );
+}