{"id":14528,"date":"2024-01-22T11:42:24","date_gmt":"2024-01-22T02:42:24","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14528"},"modified":"2024-02-04T12:34:39","modified_gmt":"2024-02-04T03:34:39","slug":"three-js%ec%9d%98-%ec%95%a0%eb%8b%88%eb%a9%94%ec%9d%b4%ec%85%98-%ec%8b%9c%ec%8a%a4%ed%85%9c","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14528","title":{"rendered":"three.js\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c"},"content":{"rendered":"

\uac1c\uc694<\/h3>\n

three.js\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c\uc744 \ud1b5\ud574 \ubaa8\ub378\uc758 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc560\ub2c8\uba54\uc774\ud2b8\u001f \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4 : \uc2a4\ud0a8\ub4dc \uc564 \ub9ac\uc9c0\ub4dc \ubaa8\ub378(Skinned & Rigged Model)\uc758 \ubf08\ub300, \ubaa8\ud504 \ud0c0\uac9f(Morph Targets), \uc7ac\uc9c8\uc758 \uc18d\uc131(\uc0c9, \ubd88\ud22c\uba85\ub3c4, boolean \uac12), \ubcf4\uc774\uace0 \uc54a\ubcf4\uc774\uae30, \ubcc0\ud658(\uc704\uce58, \ud06c\uae30, \ud68c\uc804). \uc560\ub2c8\uba54\uc774\ud2b8 \ub41c \uc18d\uc131\uc740 \uc810\uc9c4\uc801\uc73c\ub85c \uc11c\uc11c\ud788 \ubcc0\uacbd\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ub978 \uac1d\uccb4 \ubfd0\ub9cc \uc544\ub2c8\ub77c \ub3d9\uc77c\ud55c \uac1d\uccb4\uc758 \uc11c\ub85c \ub2e4\ub978 \uc5f0\uc18d\ub41c \uc560\ub2c8\uba54\uc774\uc158\uc758 \uac00\uc911\uce58(Weight)\uc640 \ud0c0\uc784 \uc2a4\ucf00\uc77c(Time Scale)\uc740 \ub3c5\ub9bd\uc801\uc73c\ub85c \ubcc0\uacbd\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub3d9\uc2dc\uc5d0 \ub2e4\uc591\ud55c \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub2e4\ub978 \ubb3c\uccb4\uc5d0 \ub3d9\uae30\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud558\ub098\uc758 \ub3d9\uc77c\ud55c \ucc28\uc6d0\uc758 \uc2dc\uc2a4\ud15c\uc5d0\uc11c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \ub300\ud55c \uc774 \ubaa8\ub4e0 \uac83\ub4e4\uc744 \uc774\ub8e8\uae30 \uc704\ud574\uc11c three.js\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c\uc740 2015\ub144\uc5d0 \uc644\uc804\ud788 \ubcc0\uacbd<\/a>\ub418\uc5c8\uc73c\uba70, \uc720\ub2c8\ud2f0\uc640 \uc5b8\ub9ac\uc5bc \uc5d4\uc9c44\uc640 \uc720\uc0ac\ud55c \uad6c\uc870\ub97c \uac16\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc774 \ubb38\uc11c\ub294 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c\uc758 \uc8fc\uc694 \uc694\uc18c\uc5d0 \ub300\ud55c \uac1c\ub7b5\uc801\uc778 \uac1c\uc694\uc640 \uc5b4\ub5bb\uac8c \ud568\uaed8 \uc791\ub3d9 \ub418\ub294\uc9c0\ub97c \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n

\uc560\ub2c8\uba54\uc774\uc158 \ud074\ub9bd(Animation Clips)<\/h3>\n

\ube14\ub80c\ub354 \ub4f1\uacfc \uac19\uc740 3\ucc28\uc6d0 \ubaa8\ub378\ub9c1 \ud234\ub85c\ubd80\ud130 glTF \ud615\uc2dd\uc73c\ub85c \uc800\uc7a5\ud558\uace0 \uc774\ub97c three.js\uc758 GLTFLoader \ucf54\ub4dc\ub97c \ud1b5\ud574 \ubaa8\ub378\uc744 \ubd88\ub7ec\uc654\ub2e4\uba74(\uc774 \ubaa8\ub378\uc774 Bones\uc774\ub098 Morph Targets \ub610\ub294 \ub458\ub2e4 \uc5c6\uc5b4\ub3c4 \uc0c1\uad00\uc5c6\uc74c) \uc774 \ubaa8\ub378 \uac39\uccb4\uc5d0\ub294 AnimationClips \ud0c0\uc785\uc758 \uac1d\uccb4\ub97c \uac00\uc9c0\ub294 \ubc30\uc5f4\uc778 “animations”\ub77c\ub294 \uc774\ub984\uc758 \ud544\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uac01\uac01\uc758 AnimationClip \uac1d\uccb4\ub294 \uac1d\uccb4\uc758 \ud2b9\uc815 \ud589\uc704\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \ub9cc\uc57d \ub9e4\uc2dc\uac00 \ucf00\ub9ad\ud130\ub77c\uba74 \uccab\ubc88\uc9f8\ub294 \uac77\uae30, \ub450\ubc88\uc9f8\ub294 \uc810\ud504, \uc138\ubc88\uc9f8\ub294 \uc606\uc73c\ub85c \uac77\uae30\uc5d0 \ub300\ud55c \ub370\uc774\ud130\uac00 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud0a4\ud504\ub808\uc784 \ud2b8\ub799(Keyframe Tracks)<\/h3>\n

\uc774\ub7f0 AnimationClip \ub0b4\ubd80\uc5d0\ub294 \uac1c\ubcc4\uc801\uc778 KeyframeTrack \uac1d\uccb4\uc5d0 \uc800\uc7a5\ub41c \uc560\ub2c8\uba54\uc774\ud2b8 \uc18d\uc131 \ub370\uc774\ud130\uac00 \uc800\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \ucf00\ub9ad\ud130 \uac1d\uccb4\uac00\u001d \uc2a4\ucf08\ub808\ud134(\bSkeleton)\uc744 \uac00\uc9c0\uace0 \uc788\ub2e4\uace0 \ud55c\ub2e4\uba74, \ud558\ub098\uc758 \ud0a4\ud504\ub808\uc784 \ud2b8\ub799\uc740 \uc2dc\uac04\uc5d0 \ub300\ud55c \ud314\uc758 \uc704\uce58 \ubcc0\ud654\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ub978 \ud0a4\ud504\ub808\uc784 \ud2b8\ub799\uc740 \ud68c\uc804 \ubcc0\ud654\ub098 \ud06c\uae30 \ubcc0\ud654 \ub4f1\uc774 \uc800\uc7a5\ub418\uc5b4 \uc788\uad6c\uc694. \ud558\ub098\uc758 AnimationClip\uc740 \uc5ec\ub7ec\uac1c\uc758 \ud0a4\ud504\ub808\uc784 \ud2b8\ub799\uc73c\ub85c \uad6c\uc131\ub420 \uc218 \uc788\ub2e4\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

\uc560\ub2c8\uba54\uc774\uc158 \ubbf9\uc11c(Animation Mixer)<\/h3>\n

\uc800\uc7a5\ub41c \ub370\uc774\ud130\ub294 \uc624\uc9c1 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud55c \uae30\ubc18\ub9cc\uc73c\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc2e4\uc81c \uc7ac\uc0dd\uc740 AnimationMixer\ub97c \ud1b5\ud574 \uc81c\uc5b4\ub429\ub2c8\ub2e4. \uc774 AnimationMixer\uac00 \ub2e8\uc21c\ud788 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc7ac\uc0dd\ud558\ub294 \uac1d\uccb4\uc77c \ubfd0\uc774\ub77c\uace0 \uc0dd\uac01\ud560 \uc218 \uc788\uc9c0\ub9cc \uc774 \uac1d\uccb4\ub294 \uc5ec\ub7ec\uac1c\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc5f0\uc18d\uc801\uc73c\ub85c \uc790\uc5f0\uc2a4\ub7fd\uac8c \ucc98\ub9ac\ub420 \uc218 \uc788\ub3c4\ub85d \ube14\ub80c\ub529\ud558\uace0 \ud569\uce60 \uc218 \uc788\ub294 \uc2e4\uc81c \ubbf9\uc11c(Mixer)\uc640 \uac19\uc740 \uae30\ub2a5\uc744 \uc218\ud589\ud569\ub2c8\ub2e4.<\/p>\n

\uc560\ub2c8\uba54\uc774\uc158 \uc561\uc158(Animation Action)<\/h3>\n

AnimationMixer \uc790\uccb4\ub294 \uba87\uac1c \uc548\ub418\ub294 (\uc77c\ubc18\uc801\uc778) \uc18d\uc131\uacfc \ub9e4\uc11c\ub4dc\ub97c \uac00\uc9c0\uace0 \uc788\ub294\ub370, AnimationMixer\uac00 AnimationAction\uc5d0 \uc758\ud574 \uc81c\uc5b4\ub418\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. AnimationAction\uc744 \uad6c\uc131\ud568\uc73c\ub85c\uc368 \uc5b4\ub5a4 AnimationClip\uc774 \uc7ac\uc0dd\ub418\uc5b4\uc9c0\uace0, \uc7a0\uc2dc \uba48\ucd94\uac70\ub098 \uc644\uc804\ud788 \uba48\ucd94\uac70\ub098 \ud560\ub54c\ub97c \uacb0\uc815\ud560 \uc218 \uc788\uace0 \uc560\ub2c8\uba54\uc774\uc158\uc744 \uc5bc\ub9c8\ub098 \ubc18\ubcf5\ub420 \uac83\uc778\uc9c0, \ub2e4\ub978 \uc560\ub2c8\uba54\uc774\uc158 \uc561\uc120\uc73c\ub85c\uc758 \uc804\ud658(Fade)\uc774\ub098 \ud0c0\uc784 \uc2a4\ucf00\uc77c\ub9c1(Time Scaling)\u001d \ub4f1\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc560\ub2c8\uba54\uc774\uc158 \uac1d\uccb4 \uadf8\ub8f9(Animation Object Groups)<\/h3>\n

\uacf5\uc720\ub41c \uc560\ub2c8\uba54\uc774\uc158 \uc0c1\ud0dc\ub97c \ubc1b\uae30 \uc704\ud574 \uac1d\uccb4\ub4e4\uc758 \uadf8\ub8f9\uc774 \ud544\uc694\ud558\ub2e4\uba74 AnimationObjectGroup\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc9c0\uc6d0\ub418\ub294 \ud615\uc2dd\uacfc \ub85c\ub354(Loader)<\/h3>\n

\ubaa8\ub4e0 \ubaa8\ub378 \ud615\uc2dd\uc774 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ud3ec\ud568\ud560 \uc218 \uc788\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4. three.js \ub85c\ub354 \ub4e4\uc911 \uba87\uac1c\ub9cc\uc774 AnimationClip\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4 : THREE.ObjectLoader, THREE.BVHLoader, THREE.ColladaLoader, THREE.FBXLoader, THREE.GLTFLoader, THREE.GLTFLoader, THREE.MMDLoader<\/p>\n

3dx max\uc640 Maya\ub294 \ub2e8\uc77c \ud30c\uc77c\uc5d0 \uc5ec\ub7ec\uac1c\uc758 \uc560\ub2c8\uba54\uc774\uc158\uc744 \ub0b4\ubcf4\ub0bc \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc608\uc81c<\/h3>\n
\r\nlet mesh;\r\n\r\n\/\/ Create an AnimationMixer, and get the list of AnimationClip instances\r\nconst mixer = new THREE.AnimationMixer( mesh );\r\nconst clips = mesh.animations;\r\n\r\n\/\/ Update the mixer on each frame\r\nfunction update () {\r\n\tmixer.update( deltaSeconds );\r\n}\r\n\r\n\/\/ Play a specific animation\r\nconst clip = THREE.AnimationClip.findByName( clips, 'dance' );\r\nconst action = mixer.clipAction( clip );\r\naction.play();\r\n\r\n\/\/ Play all animations\r\nclips.forEach( function ( clip ) {\r\n\tmixer.clipAction( clip ).play();\r\n} );\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\uac1c\uc694 three.js\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c\uc744 \ud1b5\ud574 \ubaa8\ub378\uc758 \ub2e4\uc591\ud55c \uc18d\uc131\uc744 \uc560\ub2c8\uba54\uc774\ud2b8\u001f \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4 : \uc2a4\ud0a8\ub4dc \uc564 \ub9ac\uc9c0\ub4dc \ubaa8\ub378(Skinned & Rigged Model)\uc758 \ubf08\ub300, \ubaa8\ud504 \ud0c0\uac9f(Morph Targets), \uc7ac\uc9c8\uc758 \uc18d\uc131(\uc0c9, \ubd88\ud22c\uba85\ub3c4, boolean \uac12), \ubcf4\uc774\uace0 \uc54a\ubcf4\uc774\uae30, \ubcc0\ud658(\uc704\uce58, \ud06c\uae30, \ud68c\uc804). \uc560\ub2c8\uba54\uc774\ud2b8 \ub41c \uc18d\uc131\uc740 \uc810\uc9c4\uc801\uc73c\ub85c \uc11c\uc11c\ud788 \ubcc0\uacbd\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub2e4\ub978 \uac1d\uccb4 \ubfd0\ub9cc \uc544\ub2c8\ub77c \ub3d9\uc77c\ud55c \uac1d\uccb4\uc758 \uc11c\ub85c \ub2e4\ub978 \uc5f0\uc18d\ub41c \uc560\ub2c8\uba54\uc774\uc158\uc758 \uac00\uc911\uce58(Weight)\uc640 \ud0c0\uc784 \uc2a4\ucf00\uc77c(Time … <\/p>\n
\ub354 \ubcf4\uae30 “three.js\uc758 \uc560\ub2c8\uba54\uc774\uc158 \uc2dc\uc2a4\ud15c”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,1],"tags":[],"class_list":["post-14528","post","type-post","status-publish","format-standard","hentry","category-three-js","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14528"}],"version-history":[{"count":3,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14528\/revisions"}],"predecessor-version":[{"id":14530,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14528\/revisions\/14530"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14528"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}