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 { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm'; import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation"; import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
import { VRMSpringBoneManager } from '@pixiv/three-vrm-springbone';
interface ModelProps { interface ModelProps {
url: string url: string
url_anim: string url_anim: string
scale: [number, number, number] scale: number
position: [number, number, number] position: [number, number, number]
rotation: [number, number, number] rotation: [number, number, number]
} }
const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, scale }) => { const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, scale }) => {
const [vrm, setVrm] = useState<VRM | null>(null); const [vrm, setVrm] = useState<VRM | null>(null);
const mixerRef = useRef<THREE.AnimationMixer | null>(null); const mixerRef = useRef<THREE.AnimationMixer | null>(null);
const springBoneManagerRef = useRef<VRMSpringBoneManager | null>(null);
useEffect(() => { useEffect(() => {
const loader = new GLTFLoader(); const loader = new GLTFLoader();
@ -26,7 +27,14 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
loader.load(url, (gltf) => { loader.load(url, (gltf) => {
const vrmModel = gltf.userData.vrm as VRM; const vrmModel = gltf.userData.vrm as VRM;
VRMUtils.removeUnnecessaryJoints(vrmModel.scene); VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
springBoneManagerRef.current = vrmModel.springBoneManager as VRMSpringBoneManager;
springBoneManagerRef.current?.reset();
setVrm(vrmModel); 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); const mixer = new THREE.AnimationMixer(vrmModel.scene);
mixerRef.current = mixer; mixerRef.current = mixer;
loader.load(url_anim, (animGltf) => { loader.load(url_anim, (animGltf) => {
@ -36,21 +44,16 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
mixer.clipAction(clip).play(); 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) => { useFrame((state, delta) => {
if (mixerRef.current) mixerRef.current.update(delta); if (mixerRef.current) mixerRef.current.update(delta);
if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
if (vrm) vrm.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 = () => { export const VRMModelCanvas = () => {
@ -74,7 +77,7 @@ export const VRMModelCanvas = () => {
<OrbitControls dampingFactor={0.05} rotateSpeed={0.1} zoomSpeed={0.5}/> <OrbitControls dampingFactor={0.05} rotateSpeed={0.1} zoomSpeed={0.5}/>
<ambientLight intensity={10} /> <ambientLight intensity={10} />
<pointLight position={[10, 10, 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> </Canvas>
</div> </div>
) )