xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 01:01:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add model animation

Browse Source
This commit is contained in:
DefectingCat
2023-05-16 11:58:09 +08:00
parent 19ff3b7f58
commit 20e358fb57
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/home-modle.tsx
View File

@ -1,11 +1,14 @@
'use client';
import { Canvas, useLoader } from '@react-three/fiber';
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { Environment, OrbitControls } from '@react-three/drei';
import { Environment, OrbitControls, useProgress } from '@react-three/drei';
import { useRef, useState } from 'react';
import * as THREE from 'three';
const Model = () => {
const mixer = useRef<THREE.AnimationMixer | null>(null);
const gltf = useLoader(
GLTFLoader,
'./models/just_a_hungry_cat/modelDraco.gltf',
@ -16,6 +19,23 @@ const Model = () => {
}
);
const [loading, setLoading] = useState(true);
useProgress((state) => {
if (state.progress >= 100) {
mixer.current = new THREE.AnimationMixer(gltf.scene);
gltf.animations.forEach((clip) => {
mixer.current?.clipAction(clip).play();
});
setLoading(false);
}
return state.progress;
});
useFrame((_, delta) => {
mixer.current?.update(delta);
});
return (
<>
<primitive object={gltf.scene} />