[R3F] Three.js에서 애니메이션 캐릭터를 클론하는 방법

SkeletonUtils를 사용하여 Three.js에서 애니메이션 캐릭터를 클론하는 방법에 대해 설명하겠습니다. SkeletonUtils는 주로 react-three-fiber와 같은 라이브러리와 함께 사용됩니다. 이 유틸리티는 Three.js의 SkinnedMesh 및 Skeleton을 포함한 복잡한 3D 모델을 올바르게 클론하는 데 유용합니다.

기본적인 단계

1. Three.js 및 SkeletonUtils 가져오기
2. 3D 모델 로드
3. SkeletonUtils를 사용하여 모델 클론
4. 클론된 모델 장면에 추가

예제 코드

아래는 SkeletonUtils를 사용하여 모델을 클론하고 react-three-fiber를 사용하여 장면에 추가하는 예제입니다:

 

import React, { useRef, useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { useGLTF, SkeletonUtils } from '@react-three/drei';
import * as THREE from 'three';

function Model({ url, position }) {
  const { scene } = useGLTF(url);
  const clonedScene = useRef();

  useEffect(() => {
    clonedScene.current = SkeletonUtils.clone(scene);
  }, [scene]);

  return clonedScene.current ? <primitive object={clonedScene.current} position={position} /> : null;
}

function App() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Model url="/path/to/your/model.glb" position={[0, 0, 0]} />
      <Model url="/path/to/your/model.glb" position={[2, 0, 0]} />
    </Canvas>
  );
}

export default App;

 

상세 설명

1. Three.js 및 SkeletonUtils 가져오기:
   • SkeletonUtils는 Three.js의 유틸리티 라이브러리입니다. 이를 통해 복잡한 스켈레톤 구조를 가진 모델을 쉽게 클론할 수 있습니다.
2. 3D 모델 로드:
   • useGLTF 훅을 사용하여 GLTF 형식의 3D 모델을 로드합니다.
   • scene은 로드된 3D 모델의 장면을 나타냅니다.
3. SkeletonUtils를 사용하여 모델 클론:
   • useEffect 훅 내에서 SkeletonUtils.clone(scene)을 사용하여 모델을 클론합니다.
   • 클론된 모델은 clonedScene 레퍼런스에 저장됩니다.
4. 클론된 모델 장면에 추가:
   • clonedScene.current가 존재하면 primitive 컴포넌트를 사용하여 클론된 모델을 장면에 추가합니다.
   • position 속성을 사용하여 각 클론의 위치를 지정할 수 있습니다.

이 코드는 기본적인 예제이며, 실제 프로젝트에서는 다양한 속성 및 상태를 사용하여 더욱 복잡한 애니메이션 및 상호작용을 구현할 수 있습니다. SkeletonUtils.clone을 사용하면 모델의 모든 스켈레톤 및 애니메이션 데이터가 올바르게 복사되므로, 복잡한 3D 애니메이션 캐릭터를 쉽게 복제할 수 있습니다.