diff --git a/src/components/pile/index.tsx b/src/components/pile/index.tsx index 1b0580c..395f5de 100644 --- a/src/components/pile/index.tsx +++ b/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) => ( - <> - - - -); +const StageLight = ( + props: Omit & { + position: readonly [x: number, y: number, z: number]; + }, +) => { + const pos = new Vector3(...props.position); + + return ( + <> + + + + + + + + ); +}; export const Pile = ({ coins }: Props) => ( diff --git a/src/components/pile/stage-light-model.tsx b/src/components/pile/stage-light-model.tsx index 5d5893e..8a10312 100644 --- a/src/components/pile/stage-light-model.tsx +++ b/src/components/pile/stage-light-model.tsx @@ -9,7 +9,11 @@ export function StageLightModel(props: GroupProps) { const ref = useRef(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); }, []);