fix

.gitignore

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

galaxy-react/readme.md

@@ -12,7 +12,13 @@ $ 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,6 +17,7 @@ html {
 }
 
 .time {
+	transform:scale(-1,1);
 	position: absolute;
 	top: 10px;
 	padding: 10px;
@@ -27,6 +28,7 @@ html {
 }
 
 .api {
+	transform:scale(-1,1);
 	position: absolute;
 	top: 50px;
 	padding: 10px;

holo/src/pages/time.tsx

@@ -1,33 +1,37 @@
 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 [currentDateTime, setCurrentDateTime] = useState<string>('');
+  //const [reversedDateTime, setReversedDateTime] = useState<string>('');
 
-	useEffect(() => {
+  useEffect(() => {
-		const updateDateTime = () => {
+    const updateDateTime = () => {
-			const now = new Date();
+      const now = new Date();
-			const formatted = now.toLocaleString("ja-JP", {
+      const formatted = now.toLocaleString("ja-JP", {
-				year: 'numeric',
+        year: 'numeric',
-				month: '2-digit',
+        month: '2-digit',
-				day: '2-digit',
+        day: '2-digit',
-				hour: '2-digit',
+        hour: '2-digit',
-				minute: '2-digit',
+        minute: '2-digit',
-				second: '2-digit'
+        second: '2-digit'
-			});
+      });
-			setCurrentDateTime(formatted);
+      setCurrentDateTime(formatted);
-		};
+      //setReversedDateTime(reverseString(formatted));
+    };
+    updateDateTime();
+    const timer = setInterval(updateDateTime, 1000);
+    return () => clearInterval(timer);
+  }, []);
 
-		updateDateTime();
+  return (
-		const timer = setInterval(updateDateTime, 1000);
+    <div className="time">
-
+      <p>{currentDateTime}</p>
-		return () => clearInterval(timer);
+    </div>
-	}, []);
+  );
-
-	return (
-		<div className="time">
-		<p>{currentDateTime}</p>
-		</div>
-	);
 };
 
 export default ScreenTimeCanvas;

holo/src/pages/vrm.tsx

@@ -5,19 +5,20 @@ 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, number, number]
+ scale: 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();
@@ -26,7 +27,14 @@ 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) => {
@@ -37,14 +45,15 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
 				}
 			});
 		});
-	}, [url, url_anim]);
+	}, [url, url_anim, position, scale, rotation]);
 
 	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} position={position} rotation={rotation} scale={scale}/> : null;
+	return vrm ? <primitive object={vrm.scene} /> : null;
 };
 
 export const VRMModelCanvas = () => {
@@ -65,10 +74,10 @@ export const VRMModelCanvas = () => {
 		}}
 		camera={{ position: [1.2, 0, 0] }}>
 		<color attach="background" args={["#000"]} /> {/* Light gray background */}
-		<OrbitControls />
+		<OrbitControls dampingFactor={0.05} rotateSpeed={0.1} zoomSpeed={0.5}/>
 		<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]} />
+		<VRMModel url="./models/t.vrm" url_anim="./models/default.vrma" position={[0, -0.6, 0]} rotation={[0, 89.5, 0]} scale={1} />
 		</Canvas>
 		</div>
 	)