/*
This file was generated by https://github.com/pmndrs/gltfjsx and then
customized manually. It uses drei's new useAnimations hook which extracts
all actions and sets up a THREE.AnimationMixer for it so that you don't have to.
All of the assets actions, action-names and clips are available in its output. 
*/
import { useRef, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';
import { useFBX, useAnimations } from '@react-three/drei';
import { AnimationMixer } from 'three';

export default function Man(props) {
  const fbxRef = useRef();
  // Fetch model and a separate texture
  const fbx = useFBX('/static/models/stacy.fbx');
  const setShadow = (obj) => {
    if (obj.children) {
      obj.children.forEach((child) => {
        child.castShadow = true;
        child.receiveShadow = true;
        setShadow(child);
      });
    }
  };

  if (!fbx.castShadow) {
    setShadow(fbx);
  }
  const mixerRef = useRef();
  // 播放模型动画
  useFrame((state, delta) => {
    mixerRef.current.update(delta);
    // fbxRef.current.mixer.update(delta);
  });
  useEffect(() => {
    mixerRef.current = new AnimationMixer(fbx);
    console.log(fbx.animations);

    const action = mixerRef.current.clipAction(fbx.animations[0]); // 假设只有一个动画，可以根据实际情况修改
    console.log(fbx);

    action.play();

    return () => {
      mixerRef.current.stopAllAction();
    };
  }, []);
  return (
    <group rotation={[0, 0, 0]} scale={0.5} position={[100, 0, 400]}>
      <primitive object={fbx} castShadow />
    </group>
  );
}
