From e79dc42a2332c9afaca59b9f39aef137e0d58559 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Sat, 5 Oct 2024 14:17:04 +0900
Subject: [PATCH] fix

---
 holo/src/pages/vrm.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/holo/src/pages/vrm.tsx b/holo/src/pages/vrm.tsx
index caadbc0..a8902f0 100644
--- a/holo/src/pages/vrm.tsx
+++ b/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) => {
@@ -36,21 +44,16 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
 					mixer.clipAction(clip).play();
 				}
 			});
-			if (mixerRef.current) {
-				const hips = vrmModel.humanoid?.getBoneNode('hips');
-				if (hips) {
-					hips.rotation.y = Math.PI;
-				}
-			}
 		});
-	}, [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 = () => {
@@ -74,7 +77,7 @@ export const VRMModelCanvas = () => {
 		<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.6, 0]} rotation={[0, 89.5, 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>
 	)