[Three.js] Show Rigging GLTF

// 아바타 모델 로드
  loader.load("/gltf/avatar/animation_100.glb", (gltf) => {
    avatarMesh = gltf.scene;
    avatarRef.current.add(avatarMesh);
    console.log("avatar position: " + avatarMesh.position.x, avatarMesh.position.y, avatarMesh.position.z);

    avatarMesh.traverse((object) => {
      if (object.isBone) {
        const helper = new THREE.SkeletonHelper(object);
        boneRef.current.add(helper);
      }
    });

    // 애니메이션 Mixer를 생성하고 애니메이션 클립을 추가합니다.
    mixer.current = new AnimationMixer(avatarMesh);
    clips = gltf.animations;
    if (clips && clips.length > 0) {
      clips.forEach((clip) => {
        mixer.current.clipAction(clip).play(); // 모든 애니메이션 클립을 재생합니다.
      });
    }

    loader.load("/gltf/avatar/top.glb", (gltf) => {
      const boneMesh = gltf.scene;
      //boneRef.current.add(boneMesh);
      console.log("top position: " + boneMesh.position.x, boneMesh.position.y, boneMesh.position.z);

      printBone(boneMesh);

      boneMesh.traverse((object) => {
        if (object.isBone) {
          const helper = new THREE.SkeletonHelper(object);
          boneRef.current.add(helper);
        }
      });

      // 뼈 구조 매핑 및 조정 (뼈 구조가 완전히 일치할 때 필요)
      // bones.forEach((bone) => {
      //   const matchingBone = avatarMesh.getObjectByName(bone.name);
      //   if (matchingBone) {
      //     bone.bind(matchingBone);
      //   }
      // });
    });
  });

  // Three.js 렌더링 루프에서 위치 업데이트 함수와 애니메이션 업데이트 함수 호출
  const animate = () => {
    if (mixer.current) {
      mixer.current.update(0.01); // AnimationMixer 업데이트
    }
    requestAnimationFrame(animate);
  };

  animate();

미완성.

• 리깅된 의상을 토끼에게 입혀야 한다.
  - 리깅된 의상의 bone을 아바타 bone과 엮는 방법 테스트 중