add holo

holo/src/pages/api.tsx

@@ -0,0 +1,58 @@
+//import React, { useState, useEffect } from 'react';
+//import axios from 'axios';
+
+//interface Post {
+//	id: number;
+//	username: string;
+//	planet: number;
+//}
+
+//const ScreenApiCanvas: React.FC = () => {
+//	const [posts, setPosts] = useState<Post[]>([]);
+//	const [loading, setLoading] = useState(true);
+//	const [error, setError] = useState<string | null>(null);
+//	const searchParams = new URLSearchParams(window.location.search);
+//	var id = searchParams.get('id') ?? '2';
+//	var url = 'https://api.syui.ai/users/' + id;
+//	useEffect(() => {
+//		const fetchPosts = async () => {
+//			try {
+//				const response = await axios.get<Post[]>(url);
+//				setPosts(response.data);
+//				setLoading(false);
+//			} catch (err) {
+//				setError('error network api');
+//				setLoading(false);
+//			}
+//		};
+//
+//		fetchPosts();
+//	}, [url]);
+//
+//	if (loading) return <div>読み込み中...</div>;
+//	if (error) return <div>{error}</div>;
+//
+//	return (
+//		<div className="api">
+//		<ul>
+//		{posts.map(post => (
+//			<li key={post.id}>{post.username} / M {post.planet}</li>
+//		))}
+//		</ul>
+//		</div>
+//	);
+//};
+
+import React from 'react';
+const ScreenApiCanvas: React.FC = () => {
+	const searchParams = new URLSearchParams(window.location.search);
+	var m = searchParams.get('m') ?? '0';
+	var u = searchParams.get('u') ?? 'ai';
+	return (
+		<div className="api">
+		<p>{u} / M{m}</p>	
+		</div>
+	);
+};
+
+export default ScreenApiCanvas;

holo/src/pages/time.tsx

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+const ScreenTimeCanvas: React.FC = () => {
+	const [currentDateTime, setCurrentDateTime] = useState<string>('');
+
+	useEffect(() => {
+		const updateDateTime = () => {
+			const now = new Date();
+			const formatted = now.toLocaleString("ja-JP", {
+				year: 'numeric',
+				month: '2-digit',
+				day: '2-digit',
+				hour: '2-digit',
+				minute: '2-digit',
+				second: '2-digit'
+			});
+			setCurrentDateTime(formatted);
+		};
+
+		updateDateTime();
+		const timer = setInterval(updateDateTime, 1000);
+
+		return () => clearInterval(timer);
+	}, []);
+
+	return (
+		<div className="time">
+		<p>{currentDateTime}</p>
+		</div>
+	);
+};
+
+export default ScreenTimeCanvas;

holo/src/pages/vrm.tsx

@@ -0,0 +1,76 @@
+import * as THREE from 'three'
+import React, { useState, useEffect, useRef } from 'react';
+import { OrbitControls } from '@react-three/drei'
+import { useFrame, Canvas } from '@react-three/fiber';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
+import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
+
+interface ModelProps {
+	url: string
+	url_anim: string
+ scale: [number, number, number]
+ position: [number, number, number]
+ rotation: [number, number, number]
+}
+
+const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, scale }) => {
+
+	const [vrm, setVrm] = useState<VRM | null>(null);
+	const mixerRef = useRef<THREE.AnimationMixer | null>(null);
+
+	useEffect(() => {
+		const loader = new GLTFLoader();
+		loader.register((parser) => new VRMLoaderPlugin(parser));
+		loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
+		loader.load(url, (gltf) => {
+			const vrmModel = gltf.userData.vrm as VRM;
+			VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
+			setVrm(vrmModel);
+			const mixer = new THREE.AnimationMixer(vrmModel.scene);
+			mixerRef.current = mixer;
+			loader.load(url_anim, (animGltf) => {
+				const vrmAnimations = animGltf.userData.vrmAnimations as VRMAnimation[];
+				if (vrmAnimations && vrmAnimations.length > 0) {
+					const clip = createVRMAnimationClip(vrmAnimations[0], vrmModel);
+					mixer.clipAction(clip).play();
+				}
+			});
+		});
+	}, [url, url_anim]);
+
+	useFrame((state, delta) => {
+		if (mixerRef.current) mixerRef.current.update(delta);
+		if (vrm) vrm.update(delta);
+	});
+
+	return vrm ? <primitive object={vrm.scene} position={position} rotation={rotation} scale={scale}/> : null;
+};
+
+export const VRMModelCanvas = () => {
+	return (
+		<div style={{ height: '100vh', width: '100vw' }}>
+		<Canvas
+		shadows
+		gl={{
+			//toneMapping: THREE.ACESFilmicToneMapping,
+			//toneMapping: THREE.ReinhardToneMapping,
+			toneMapping: THREE.NeutralToneMapping,
+				toneMappingExposure: 1,
+				alpha: true,
+				powerPreference: "high-performance",
+				antialias: true,
+				//stencil: false,
+				//depth: false
+		}}
+		camera={{ position: [1.2, 0, 0] }}>
+		<color attach="background" args={["#000"]} /> {/* Light gray background */}
+		<OrbitControls />
+		<ambientLight intensity={10} />
+		<pointLight position={[10, 10, 10]} />
+		<VRMModel url="./models/t.vrm" url_anim="./models/default.vrma" position={[0, -0.7, 0]} rotation={[0, -4.7, 0]} scale={[1, 1, 1]} />
+		</Canvas>
+		</div>
+	)
+}
+export default VRMModelCanvas;