\uc560\ub2c8\uba54\uc774\uc158 \ubaa8\ub378 \ub9ac\uc18c\uc2a4\ub85c\ubd80\ud130 \uac00\uc838\uc628 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec\uac1c \ubcf5\uc0ac\ud574\uc11c \uc0ac\uc6a9\ud558\uace0\uc790 \ud560\ub54c \ud544\uc694\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
1\uac1c\ub9cc \uc0ac\uc6a9\ud560\ub54c\ub294 \ubb38\uc81c\uac00 \uc5c6\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc791\uc131\ub41c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { useGLTF, useAnimations } from '@react-three\/drei'\r\nimport * as THREE from \"three\"\r\n\r\nexport function Robot({ color = \"gray\", ...props }) {\r\n const group = useRef()\r\n const { nodes, materials, animations } = useGLTF('\/Robot.glb')\r\n const { actions } = useAnimations(animations, group)\r\n const [ animation, setAnimation ] = useState(\"Idle\")\r\n\r\n useEffect(() => {\r\n actions[animation].reset().fadeIn(0.5).play()\r\n return () => actions[animation].fadeOut(0.5)\r\n }, [ animation ])\r\n\r\n materials.Alpha_Body_MAT.color = new THREE.Color(color)\r\n\r\n return (\r\n <group ref={group} {...props} dispose={null}>\r\n <group name=\"Scene\">\r\n <group name=\"Armature\" rotation={[Math.PI \/ 2, 0, 0]} scale={0.01}>\r\n <primitive object={nodes.mixamorigHips} \/>\r\n <skinnedMesh name=\"Alpha_Joints\" geometry={nodes.Alpha_Joints.geometry} material={materials.Alpha_Joints_MAT} skeleton={nodes.Alpha_Joints.skeleton} \/>\r\n <skinnedMesh name=\"Alpha_Surface\" geometry={nodes.Alpha_Surface.geometry} material={materials.Alpha_Body_MAT} skeleton={nodes.Alpha_Surface.skeleton} \/>\r\n <\/group>\r\n <\/group>\r\n <\/group>\r\n )\r\n}\r\n\r\nuseGLTF.preload('\/Robot.glb')\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\uc5d0 \ub300\ud55c \ubaa8\ub378 \uc5ec\ub7ec\uac1c\ub97c \uc7a5\uba74\uc5d0 \ucd94\uac00\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\ucc98\ub7fc \ucf54\ub4dc\ub97c \uc218\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\r\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { useGLTF, useAnimations } from '@react-three\/drei'\r\nimport * as THREE from \"three\"\r\nimport { useGraph } from '@react-three\/fiber'\r\nimport { SkeletonUtils } from \"three-stdlib\"\r\n\r\nexport function Robot({ color = \"gray\", ...props }) {\r\n const group = useRef()\r\n const { scene, materials, animations } = useGLTF('\/Robot.glb')\r\n const clone = useMemo(() => SkeletonUtils.clone(scene), [scene])\r\n const { nodes } = useGraph(clone)\r\n const { actions } = useAnimations(animations, group)\r\n const [ animation, setAnimation ] = useState(\"Idle\")\r\n\r\n useEffect(() => {\r\n actions[animation].reset().fadeIn(0.5).play()\r\n return () => actions[animation].fadeOut(0.5)\r\n }, [ animation ])\r\n\r\n const material = materials.Alpha_Body_MAT.clone()\r\n material.color = new THREE.Color(color)\r\n\r\n return (\r\n <group ref={group} {...props} dispose={null}>\r\n <group name=\"Scene\">\r\n <group name=\"Armature\" rotation={[Math.PI \/ 2, 0, 0]} scale={0.01}>\r\n <primitive object={nodes.mixamorigHips} \/>\r\n <skinnedMesh name=\"Alpha_Joints\" geometry={nodes.Alpha_Joints.geometry} material={materials.Alpha_Joints_MAT} skeleton={nodes.Alpha_Joints.skeleton} \/>\r\n <skinnedMesh name=\"Alpha_Surface\" geometry={nodes.Alpha_Surface.geometry} material={material} skeleton={nodes.Alpha_Surface.skeleton} \/>\r\n <\/group>\r\n <\/group>\r\n <\/group>\r\n )\r\n}\r\n\r\nuseGLTF.preload('\/Robot.glb')\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c SkeletonUtils\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294\ub370 \uc774\ub97c \uc704\ud574 \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uc5ec three-stdlib\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
npm i three-stdlib<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"\uc560\ub2c8\uba54\uc774\uc158 \ubaa8\ub378 \ub9ac\uc18c\uc2a4\ub85c\ubd80\ud130 \uac00\uc838\uc628 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec\uac1c \ubcf5\uc0ac\ud574\uc11c \uc0ac\uc6a9\ud558\uace0\uc790 \ud560\ub54c \ud544\uc694\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4. 1\uac1c\ub9cc \uc0ac\uc6a9\ud560\ub54c\ub294 \ubb38\uc81c\uac00 \uc5c6\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc791\uc131\ub41c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. import React, { useEffect, useMemo, useRef, useState } from ‘react’ import { useGLTF, useAnimations } from ‘@react-three\/drei’ import * as THREE from “three” export function Robot({ color = “gray”, …props }) { const group = … <\/p>\n