add holo

.gitignore

@@ -7,4 +7,3 @@
 **_site**
 **.jekyll**
 galaxy-react/public/models
-holo/public/models

galaxy-react/readme.md

@@ -12,13 +12,7 @@ $ npm run start
 # npm install three three-stdlib @types/three @react-three/fiber @react-three/fiber @react-three/drei @react-three/postprocessing
 ```
 
-## tips
-
-- `?ms=0`
-- `?g=moon`
-
 ## ref
 
 - galaxy.glb : https://sketchfab.com/3d-models/need-some-space-d6521362b37b48e3a82bce4911409303
 - tsx : https://gist.github.com/artokun/fb7f0c68a01ba5d9813abb3ccce254c4
-

holo/src/index.css

@@ -17,7 +17,6 @@ html {
 }
 
 .time {
-	transform:scale(-1,1);
 	position: absolute;
 	top: 10px;
 	padding: 10px;
@@ -28,7 +27,6 @@ html {
 }
 
 .api {
-	transform:scale(-1,1);
 	position: absolute;
 	top: 50px;
 	padding: 10px;

holo/src/pages/time.tsx

@@ -1,37 +1,33 @@
 import React, { useState, useEffect } from 'react';
 
-//function reverseString(str: string): string {
-//  return str.split('').reverse().join('');
-//}
-
 const ScreenTimeCanvas: React.FC = () => {
-  const [currentDateTime, setCurrentDateTime] = useState<string>('');
-  //const [reversedDateTime, setReversedDateTime] = useState<string>('');
+	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);
-      //setReversedDateTime(reverseString(formatted));
-    };
-    updateDateTime();
-    const timer = setInterval(updateDateTime, 1000);
-    return () => clearInterval(timer);
-  }, []);
+	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);
+		};
 
-  return (
-    <div className="time">
-      <p>{currentDateTime}</p>
-    </div>
-  );
+		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

@@ -5,20 +5,19 @@ 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";
-import { VRMSpringBoneManager } from '@pixiv/three-vrm-springbone';
 
 interface ModelProps {
 	url: string
 	url_anim: string
- scale: number
+ 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);
-	const springBoneManagerRef = useRef<VRMSpringBoneManager | null>(null);
 
 	useEffect(() => {
 		const loader = new GLTFLoader();
@@ -27,14 +26,7 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
 		loader.load(url, (gltf) => {
 			const vrmModel = gltf.userData.vrm as VRM;
 			VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
-			springBoneManagerRef.current = vrmModel.springBoneManager as VRMSpringBoneManager;
-			springBoneManagerRef.current?.reset();
 			setVrm(vrmModel);
-			if (vrmModel) {
-				vrmModel.scene.rotation.set(...rotation);
-				vrmModel.scene.position.set(...position);
-				vrmModel.scene.scale.setScalar(scale);
-			}
 			const mixer = new THREE.AnimationMixer(vrmModel.scene);
 			mixerRef.current = mixer;
 			loader.load(url_anim, (animGltf) => {
@@ -45,15 +37,14 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
 				}
 			});
 		});
-	}, [url, url_anim, position, scale, rotation]);
+	}, [url, url_anim]);
 
 	useFrame((state, delta) => {
 		if (mixerRef.current) mixerRef.current.update(delta);
-		if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
 		if (vrm) vrm.update(delta);
 	});
 
-	return vrm ? <primitive object={vrm.scene} /> : null;
+	return vrm ? <primitive object={vrm.scene} position={position} rotation={rotation} scale={scale}/> : null;
 };
 
 export const VRMModelCanvas = () => {
@@ -74,10 +65,10 @@ export const VRMModelCanvas = () => {
 		}}
 		camera={{ position: [1.2, 0, 0] }}>
 		<color attach="background" args={["#000"]} /> {/* Light gray background */}
-		<OrbitControls dampingFactor={0.05} rotateSpeed={0.1} zoomSpeed={0.5}/>
+		<OrbitControls />
 		<ambientLight intensity={10} />
 		<pointLight position={[10, 10, 10]} />
-		<VRMModel url="./models/t.vrm" url_anim="./models/default.vrma" position={[0, -0.6, 0]} rotation={[0, 89.5, 0]} scale={1} />
+		<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>
 	)