feat: more dances and VRM controls!

Author: maamokun

next.config.mjs

@@ -4,7 +4,6 @@ import createNextIntlPlugin from "next-intl/plugin";
 
 const withNextIntl = createNextIntlPlugin();
 
-const nextConfig = {
-};
+const nextConfig = {};
 
 export default withNextIntl(nextConfig);

src/app/[locale]/page.tsx

@@ -73,12 +73,7 @@ export default function Home() {
 					</div>
 				</div>
 				<div className="">
-					<Link
-						href={"https://www.youtube.com/@mikndotdev"}
-						target={"_blank"}
-					>
-						<VRM />
-					</Link>
+					<VRM />
 				</div>
 			</div>
 

src/components/nUI/Header.tsx

@@ -263,15 +263,15 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
 												key={buttonProps.title}
 											>
 												<button
-													className="btn btn-primary text-white"
+													className="btn btn-secondary text-white"
 													{...buttonProps}
 												>
 													{buttonProps.title}
 												</button>
 											</Link>
 										) : (
 											<button
-												className="btn btn-primary text-white"
+												className="btn btn-secondary text-white"
 												{...buttonProps}
 												key={buttonProps.title}
 											>
@@ -334,15 +334,15 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
 									key={buttonProps.title}
 								>
 									<button
-										className="btn btn-primary text-white"
+										className="btn btn-secondary text-white"
 										{...buttonProps}
 									>
 										{buttonProps.title}
 									</button>
 								</Link>
 							) : (
 								<button
-									className="btn btn-primary text-white"
+									className="btn btn-secondary text-white"
 									{...buttonProps}
 									key={buttonProps.title}
 								>

src/components/vrm.tsx

@@ -1,24 +1,47 @@
 "use client";
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
-import React, { useState, useEffect } from "react";
+import { useState, useEffect, useRef, FC } from "react";
 import { Canvas, useFrame } from "@react-three/fiber";
 // @ts-ignore
 import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { AnimationAction } from "three";
 import { VRMLoaderPlugin } from "@pixiv/three-vrm";
 import {
 	VRMAnimationLoaderPlugin,
 	createVRMAnimationClip,
 } from "@pixiv/three-vrm-animation";
 import { AnimationMixer, LoopOnce, LoopRepeat } from "three";
+import { PiPlayPause, PiRepeat } from "react-icons/pi";
 
 const animations = [
-	{ url: "https://cdn.mikn.dev/vroid/shikanoko.vrma", loop: true, percentage: 10 },
-	{ url: "https://cdn.mikn.dev/vroid/hi.vrma", loop: false, percentage: 70 },
-	{ url: "https://cdn.mikn.dev/vroid/uishig.vrma", loop: true, percentage: 10 },
-	{ url: "https://cdn.mikn.dev/vroid/tetoris.vrma", loop: false, percentage: 10 },
+	{
+		url: "https://cdn.mikn.dev/vroid/shikanoko.vrma",
+		loop: true,
+		percentage: 10,
+	},
+	{ url: "https://cdn.mikn.dev/vroid/hi.vrma", loop: false, percentage: 50 },
+	{
+		url: "https://cdn.mikn.dev/vroid/uishig.vrma",
+		loop: false,
+		percentage: 10,
+	},
+	{
+		url: "https://cdn.mikn.dev/vroid/tetoris.vrma",
+		loop: false,
+		percentage: 10,
+	},
+	{
+		url: "https://cdn.mikn.dev/vroid/telepathy.vrma",
+		loop: false,
+		percentage: 10,
+	},
+	{
+		url: "https://cdn.mikn.dev/vroid/soware.vrma",
+		loop: false,
+		percentage: 10,
+	},
 ];
 
-export const VRMModel: React.FC<{
+export const VRMModel: FC<{
 	vrm: import("@pixiv/three-vrm").VRM | null;
 	mixer: AnimationMixer | null;
 }> = ({ vrm, mixer }) => {
@@ -43,6 +66,7 @@ export function VRM() {
 	const [vrm, setVrm] = useState<import("@pixiv/three-vrm").VRM | null>(null);
 	const [mixer, setMixer] = useState<AnimationMixer | null>(null);
 	const [isLoaded, setIsLoaded] = useState(false);
+	const actionRef = useRef<AnimationAction | null>(null);
 
 	useEffect(() => {
 		const loader = new GLTFLoader();
@@ -73,7 +97,10 @@ export function VRM() {
 		};
 
 		function pickAnimation() {
-			const total = animations.reduce((sum, anim) => sum + anim.percentage, 0);
+			const total = animations.reduce(
+				(sum, anim) => sum + anim.percentage,
+				0,
+			);
 			const rand = Math.random() * total;
 			let acc = 0;
 			for (const anim of animations) {
@@ -96,8 +123,11 @@ export function VRM() {
 								vrmAnimations[0],
 								loadedVrm,
 							);
-							const animationMixer = new AnimationMixer(loadedVrm.scene);
-							const action = animationMixer.clipAction(animationClip);
+							const animationMixer = new AnimationMixer(
+								loadedVrm.scene,
+							);
+							const action =
+								animationMixer.clipAction(animationClip);
 
 							if (loop) {
 								action.setLoop(LoopRepeat, Infinity);
@@ -108,14 +138,20 @@ export function VRM() {
 
 							action.play();
 							setMixer(animationMixer);
+							actionRef.current = action;
 						} else {
-							console.error("VRM model or humanoid is not loaded correctly.");
+							console.error(
+								"VRM model or humanoid is not loaded correctly.",
+							);
 						}
 					}
 				},
 				undefined,
 				(error: Error) => {
-					console.error("An error occurred while loading the animation:", error);
+					console.error(
+						"An error occurred while loading the animation:",
+						error,
+					);
 				},
 			);
 		};
@@ -131,19 +167,52 @@ export function VRM() {
 	}, []);
 
 	return (
-		<div className="flex justify-center items-center w-96 h-96">
-			{!isLoaded ? (
-				<div className="flex items-center justify-center p-4">
-					<span
-						className="loading loading-xl loading-spinner text-primary"
-					/>
-				</div>
-			) : (
-				<Canvas camera={{ position: [0, 0, 3] }}>
-					<ambientLight intensity={1.7} />
-					<VRMModel vrm={vrm} mixer={mixer} />
-				</Canvas>
-			)}
+		<div>
+			<div className="flex flex-col justify-center items-center w-96 h-96">
+				{!isLoaded ? (
+					<div className="flex items-center justify-center p-4">
+						<span className="loading loading-xl loading-spinner text-primary" />
+					</div>
+				) : (
+					<a
+						href={"https://youtube.com/@mikndotdev"}
+						target="_blank"
+						className={"block w-full h-full"}
+					>
+						<Canvas camera={{ position: [0, 0, 3] }}>
+							<ambientLight intensity={1.7} />
+							<VRMModel vrm={vrm} mixer={mixer} />
+						</Canvas>
+					</a>
+				)}
+			</div>
+			<div className="flex gap-2 mt-5 w-full justify-center">
+				<PiPlayPause
+					className="text-primary w-10 h-10 cursor-pointer"
+					onClick={() => {
+						if (!actionRef.current) return;
+						if (actionRef.current?.paused) {
+							actionRef.current.paused = false;
+						} else {
+							actionRef.current.paused = true;
+						}
+					}}
+				>
+					Pause
+				</PiPlayPause>
+				<PiRepeat
+					className="text-primary w-10 h-10 cursor-pointer"
+					onClick={() => {
+						if (actionRef.current) {
+							actionRef.current.reset();
+							actionRef.current.paused = false;
+							actionRef.current.play();
+						}
+					}}
+				>
+					Restart
+				</PiRepeat>
+			</div>
 		</div>
 	);
 }