[React + Three.js + blender] 움직이는 3D 캐릭터 웹사이트에 구현

 

완성작! (걸어다니는 중...)

 

https://www.mixamo.com/

Mixamo

믹사모라는 사이트에 가입하면 다양한 캐릭터 및 움직이는 동작 소스들을 무료로(!) 다운받아서 활용할 수 있다.

 

 

 

상단 탭에서 캐릭터를 먼저 고른 뒤, animations 탭에서 동작을 고르면

내가 선택한 캐릭터가 해당 동작대로 움직이는 것을 확인할 수 있다.

 

 

위 설정대로 다운로드 받은 뒤 해당 파일을 블렌더(blender) 프로그램에서 열어주고,

해당 파일을 우리가 자바스크립트(react) 환경에서 사용할 수 있는 형태로 가공해준다.

 

(자세한 방법은 https://www.youtube.com/watch?v=q7yH_ajINpA 강의를 따라하면 됨!)

 

import { OrbitControls, useAnimations, useGLTF } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import { useEffect } from 'react'
import { Suspense, useRef } from 'react'

const Model = (props) => {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/boss.glb')
  const { actions } = useAnimations(animations, group)

  useEffect(() => {
    actions.walking.play()
  })

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorigHips} />
          <skinnedMesh
            name="mixamorigArms_Geo"
            geometry={nodes.mixamorigArms_Geo.geometry}
            material={materials.Skin_MAT}
            skeleton={nodes.mixamorigArms_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigCigar_Geo"
            geometry={nodes.mixamorigCigar_Geo.geometry}
            material={materials.Cigar_Mat}
            skeleton={nodes.mixamorigCigar_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigHat_Geo"
            geometry={nodes.mixamorigHat_Geo.geometry}
            material={materials['Clothes_MAT.001']}
            skeleton={nodes.mixamorigHat_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigHead_Geo"
            geometry={nodes.mixamorigHead_Geo.geometry}
            material={materials.Skin_MAT}
            skeleton={nodes.mixamorigHead_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigJacket_Geo"
            geometry={nodes.mixamorigJacket_Geo.geometry}
            material={materials.Clothes_MAT}
            skeleton={nodes.mixamorigJacket_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigL_Eye_Geo"
            geometry={nodes.mixamorigL_Eye_Geo.geometry}
            material={materials['Eyes_MAT.001']}
            skeleton={nodes.mixamorigL_Eye_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigPants_Geo"
            geometry={nodes.mixamorigPants_Geo.geometry}
            material={materials['Clothes_MAT.001']}
            skeleton={nodes.mixamorigPants_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigR_Eye_Geo"
            geometry={nodes.mixamorigR_Eye_Geo.geometry}
            material={materials.Eyes_MAT}
            skeleton={nodes.mixamorigR_Eye_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigShoes_Geo"
            geometry={nodes.mixamorigShoes_Geo.geometry}
            material={materials['Clothes_MAT.001']}
            skeleton={nodes.mixamorigShoes_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigTeeth_Down_Geo"
            geometry={nodes.mixamorigTeeth_Down_Geo.geometry}
            material={materials.Skin_MAT}
            skeleton={nodes.mixamorigTeeth_Down_Geo.skeleton}
          />
          <skinnedMesh
            name="mixamorigTeeth_Up_Geo"
            geometry={nodes.mixamorigTeeth_Up_Geo.geometry}
            material={materials.Skin_MAT}
            skeleton={nodes.mixamorigTeeth_Up_Geo.skeleton}
          />
        </group>
      </group>
    </group>
  )
}

const Human = () => {
  return (
    <Canvas style={{ height: '90vh' }}>
      <Suspense fallback={null}>
        <OrbitControls />
        <ambientLight intensity={0.2} />
        <Model />
      </Suspense>
    </Canvas>
  )
}

export default Human

 

 

 

 

 

 

 

참고한 강의

https://www.youtube.com/watch?v=q7yH_ajINpA

 

 

blender 소스 다운받기 좋은 사이트들

https://blendswap.com/

https://quaternius.com/index.html

https://www.vectary.com/ (재미있음.. 최고!! 👍👍)