Add stage light poles and rotate them randomly

src/components/pile/index.tsx

@@ -4,7 +4,7 @@ import { useRef } from "react";
 import { CoinInstances } from "./coin-instances";
 import { CoinProps } from "@/types/coin";
 import { PlaneProps, Physics, usePlane } from "@react-three/cannon";
-import { Mesh } from "three";
+import { Mesh, Vector3 } from "three";
 import styles from "./index.module.css";
 import { StageLightModel } from "./stage-light-model";
 
@@ -23,12 +23,30 @@ const Plane = (props: PlaneProps) => {
   );
 };
 
-const StageLight = (props: SpotLightProps) => (
-  <>
-    <spotLight {...props} castShadow penumbra={1} />
-    <StageLightModel position={props.position} />
-  </>
-);
+const StageLight = (
+  props: Omit<SpotLightProps, "position"> & {
+    position: readonly [x: number, y: number, z: number];
+  },
+) => {
+  const pos = new Vector3(...props.position);
+
+  return (
+    <>
+      <spotLight {...props} castShadow penumbra={1} />
+      <StageLightModel position={pos} />
+      <mesh
+        position={[
+          pos.x + Math.abs(pos.x) / pos.x,
+          (pos.y - 2) / 2,
+          pos.z + Math.abs(pos.z) / pos.z,
+        ]}
+      >
+        <cylinderGeometry args={[1 / 3, 1 / 3, pos.y + 2, 6]} />
+        <meshBasicMaterial color="black" />
+      </mesh>
+    </>
+  );
+};
 
 export const Pile = ({ coins }: Props) => (
   <Canvas shadows camera={{ position: [0, 16, 16] }} className={styles.canvas}>

src/components/pile/stage-light-model.tsx

@@ -9,7 +9,11 @@ export function StageLightModel(props: GroupProps) {
   const ref = useRef<Group>(null!);
 
   useLayoutEffect(() => {
-    ref.current.lookAt(0, 0, 0);
+    ref.current.lookAt(
+      32 * (Math.random() - 0.5),
+      32 * (Math.random() - 0.5),
+      32 * (Math.random() - 0.5),
+    );
     ref.current.rotateY(-Math.PI / 2);
   }, []);