ai/star
ai/star
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-10-05 14:17:04 +09:00
parent 72456a96f3
commit e79dc42a23
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
holo/src/pages/vrm.tsx
View File

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