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,12 +1,7 @@
 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>('');
 
 	useEffect(() => {
 		const updateDateTime = () => {
@@ -20,10 +15,11 @@ const ScreenTimeCanvas: React.FC = () => {
 				second: '2-digit'
 			});
 			setCurrentDateTime(formatted);
-      //setReversedDateTime(reverseString(formatted));
 		};
+
 		updateDateTime();
 		const timer = setInterval(updateDateTime, 1000);
+
 		return () => clearInterval(timer);
 	}, []);
 

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>
 	)