import { ReactNode, useRef, useState } from "react"; import { Group } from "three"; import { useFrame } from "@react-three/fiber"; import { useLimiter } from "../../utils/limiter"; type Props = { children: ReactNode; xSpeed?: number; ySpeed?: number; zSpeed?: number; }; export function Spinning(props: Props) { const { children, xSpeed = 0, ySpeed = 1, zSpeed = 0 } = props; const group = useRef<Group>(); const [seed] = useState(Math.random()); const limiter = useLimiter(75); useFrame(({ clock }) => { if (!group.current || !limiter.isReady(clock)) return; group.current.rotation.x = clock.getElapsedTime() * xSpeed * 0.25 + xSpeed * seed * 100; group.current.rotation.y = clock.getElapsedTime() * ySpeed * (0.25 + seed / 10) + ySpeed * seed * 1000; group.current.rotation.z = clock.getElapsedTime() * zSpeed * 0.25 + zSpeed * seed * 40; }); return ( <group name="spacesvr-spinning" ref={group}> {children} </group> ); }