{"id":14178,"date":"2022-10-20T18:21:48","date_gmt":"2022-10-20T09:21:48","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14178"},"modified":"2023-10-22T08:52:27","modified_gmt":"2023-10-21T23:52:27","slug":"three-js%ec%97%90%ec%84%9c%ec%9d%98-%ed%96%89%eb%a0%ac-%eb%b3%80%ed%99%98matrix-transformations","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14178","title":{"rendered":"three.js\uc5d0\uc11c\uc758 \ud589\ub82c \ubcc0\ud658(Matrix Transformations)"},"content":{"rendered":"

\uc774 \uae00\uc740 three.js\uc758 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \uae00<\/a>\uc744 \ud55c\uae00\ub85c \ubc88\uc5ed\ub41c \ub0b4\uc6a9\uc73c\ub85c \ub0b4\uc6a9\uc744 \uc880\ub354 \uc774\ud574\ud558\uae30 \uc27d\uac8c \ubcf4\uac15\ud558\uc5ec \uc7ac \uc791\uc131\ud558\uc600\uc2b5\ub2c8\ub2e4..<\/p>\n

three.js\ub294 \ud589\ub82c\uc744 \uc0ac\uc6a9\ud574 3\ucc28\uc6d0 \ubcc0\ud658(\uc774\ub3d9, \ud68c\uc804, \ud06c\uae30)\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \uc778\ucf54\ub529\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc778\ucf54\ub529\uc774\ub77c\ub294 \uc758\ubbf8\uac00 \uc218\ud559\uc801\uc774\uc9c0 \ubabb\ud574 \ud63c\ub780\uc2a4\ub7ec\uc6b4\ub370 \uc778\ucf54\ub529\uc774\ub77c\uace0 \ud55c \uc774\uc720\ub294 \uc774\ub3d9\uacfc \ud68c\uc804 \uadf8\ub9ac\uace0 \ud06c\uae30\uc5d0 \ub300\ud55c \uac12\uc744 \uac01\uac01\uc758 \uc18d\uc131\uc73c\ub85c \uac1c\ubc1c\uc790\uac00 \uc9c0\uc815\ud558\uba74 4×4 \ud06c\uae30\uc758 \ud589\ub82c \uc694\uc18c\uc758 \uac12\uc73c\ub85c \uacc4\uc0b0\ub418\uc5b4\uc838 \uc9c0\uc815\ub41c\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. Object3D \ud074\ub798\uc2a4\uc758 \ubaa8\ub4e0 \uc778\uc2a4\ud134\uc138\ub294 matrix \uc18d\uc131\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba70 \uc774 \uc18d\uc131\uc5d0\ub294 \uac1d\uccb4\uc758 \uc704\uce58, \ud68c\uc804, \ud06c\uae30\uc5d0 \ub300\ud55c \uac12\uc774 \uc800\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc740 \uac1d\uccb4\uc758 \ubcc0\ud658\uc774 \uc5b4\ub5bb\uac8c \uc5c5\ub370\uc774\ud2b8 \ub418\ub294\uc9c0\ub97c \uc124\uba85\ud569\ub2c8\ub2e4.<\/p>\n

\ud3b8\uc758 \uc18d\uc131\uacfc matrixAutoUpdate<\/h4>\n

\uac1d\uccb4\uc758 \ubcc0\ud658\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\ub294 2\uac00\uc9c0 \ubc29\uc2dd\uc774 \uc874\uc7ac\ud569\ub2c8\ub2e4.<\/p>\n

\uccab\ubc88\uc9f8\ub294, \uac1d\uccb4\uc758 position, quaternion, scale \uc18d\uc131\uc744 \ubcc0\uacbd\ud558\uba74 three.js\ub294 \uc774 3\uac1c\uc758 \uc18d\uc131\ub4e4\uc744 \uc774\uc6a9\ud574 \uac1d\uccb4\uc758 matrix \uc18d\uc131\uc744 \ub2e4\uc2dc \uacc4\uc0b0\ud569\ub2c8\ub2e4.<\/p>\n

\r\nobject.position.copy( start_position );\r\nobject.quaternion.copy( quaternion );\r\n<\/pre>\n
\uae30\ubcf8\uc801\uc73c\ub85c matrixAutoUpdate \uc18d\uc131\uc774 true \uac12\uc73c\ub85c \uc9c0\uc815\ub418\uc5b4 \uc788\ub294\ub370, \uc774 \uacbd\uc6b0 \uc55e\uc11c \ub9d0\ud55c \uac83\ucc98\ub7fc \ud589\ub82c \uc18d\uc131\uc740 \uc790\ub3d9\uc73c\ub85c \ub2e4\uc2dc \uacc4\uc0b0\ub418\uc5b4 \uc9d1\ub2c8\ub2e4. \ub9cc\uc57d \uac1d\uccb4\uac00 \uc6c0\uc9c1\uc774\uc9c0 \uc54a\uace0 \uace0\uc815\ub41c \uc0c1\ud0dc\uc774\uac70\ub098 matrix\uc5d0 \ub300\ud55c \uc7ac\uacc4\uc0b0\uc744 \uc218\ub3d9\uc73c\ub85c \uc2e4\ud589\ud558\uace0\uc790 \ud55c\ub2e4\uba74 \uc774 matrixAutoUpdate\ub97c false\ub85c \uc9c0\uc815\ud574\uc11c \ub354 \ub098\uc740 \uc131\ub2a5\uc744 \ub3c4\ubaa8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nobject.matrixAutoUpdate = false;\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ucc98\ub7fc matrixAutoUpdate\ub97c false\ub85c \uc9c0\uc815\ud588\ub2e4\uba74, matrix\ub97c \uc7ac\uacc4\uc0b0\ud558\ub3c4\ub85d \ud558\uae30 \uc704\ud574 \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc2e4\ud589\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n
\r\nobject.updateMatrix();\r\n<\/pre>\n
\ub450\ubc88\uc9f8\ub294, \uac1d\uccb4\uc758 matrix \uc18d\uc131\uc744 \uc9c1\uc811 \ubcc0\uacbd\ud560 \ub54c\uc785\ub2c8\ub2e4. Matrix4 \ud074\ub798\uc2a4\ub294 \ud589\ub82c\uc758 \uac11\uc2ac \ubcc0\uacbd\ud560 \uc218 \uc788\ub294 \ub2e4\uc591\ud55c \uba54\uc11c\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
\r\nobject.matrix.setRotationFromQuaternion( quaternion );\r\nobject.matrix.setPosition( start_position );\r\nobject.matrixAutoUpdate = false;\r\n<\/pre>\n
\uc774\ucc98\ub7fc matrix \uc18d\uc131\uc758 \ub0b4\ubd80 \uac12\uc744 \uc9c1\uc811 \ubcc0\uacbd\ud55c \uacbd\uc6b0 matrixAutoUpdate \uc18d\uc131\uc744 \ubc18\ub4dc\uc2dc false\ub85c \uc9c0\uc815\ud574\uc57c \ud55c\ub2e4\ub294 \uc810\uc5d0 \uc8fc\uc758\ud574\uc57c \ud558\uba70 updateMatrix \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud574\uc11c\ub294 \uc548\ub429\ub2c8\ub2e4. updateMatrix \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud558\ub294 \uc21c\uac04 \uac1d\uccb4\uc758
\nposition, quaternion, scale \uc18d\uc131\uc744 \uae30\ubc18\uc73c\ub85c matrix \uc18d\uc131\uc774 \uc7ac\uacc4\uc0b0\ub418\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n
\uac1d\uccb4\uc640 \uc6d4\ub4dc \ud589\ub82c<\/h4>\n
\uac1d\uccb4\uc758 matrix \uc18d\uc131\uc740 \uac1d\uccb4\uc758 \ubcc0\ud658\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \ub2f4\uace0 \uc788\ub294\ub370 \uc774 \uac12\ub4e4\uc740 \uac1d\uccb4\uc758 \ubd80\ubaa8\uc5d0 \ub300\ud55c \uc0c1\ub300\uc801\uc778 \uac12\uc785\ub2c8\ub2e4. \uc6d4\ub4dc \uc88c\ud45c\uacc4\uc5d0 \ub300\ud55c \uac1d\uccb4\uc758 \ubcc0\ud658 \uc815\ubcf4\ub97c \uc5bb\uace0\uc790 \ud55c\ub2e4\uba74 \ubc18\ub4dc\uc2dc \uac1d\uccb4\uc758 matrixWorld \uc18d\uc131\uc744 \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\ubd80\ubaa8 \ub610\ub294 \uc790\uc2dd \uac1d\uccb4\uc758 \ubcc0\ud658\uc774 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c, \uc790\uc2dd \uac1d\uccb4\uc758 matrixWorld \uc18d\uc131\uc740 updateMatrixWorld \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud568\uc73c\ub85c\uc368 \uc5c5\ub370\uc774\ud2b8\ub418\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud68c\uc804\uacfc \ucffc\ud130\ub2c8\uc548(Quaternion)<\/h4>\n
three.js\ub294 3\ucc28\uc6d0 \ud68c\uc804\uc744 2\uac00\uc9c0 \ubc29\uc2dd\uc73c\ub85c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc989, \uc624\uc77c\ub7ec \uac01(Euler angles)\uacfc \ucffc\ud130\ub2c8\uc548(Quaternions)\uc785\ub2c8\ub2e4. \uc774 2\uac1c\ub294 \uc11c\ub85c \ubcc0\ud658\ub420 \uc218 \uc788\ub294 \ub9e4\uc11c\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc624\uc77c\ub7ec \uac01\uc740 \uc9d0\ubc8c\ub77d(Gimbal Lock)\uc774\ub77c \ubb38\uc81c\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc9d0\ubc8c\ub77d\uc740 \uc5b4\ub5a4 \ud68c\uc804 \uc0c1\ud0dc\uc5d0 \ub3c4\ub2ec\ud558\uba74 3\uac1c\uc758 \ucd95\uc5d0 \ub300\ud55c \ud68c\uc804 \uc790\uc720\ub3c4\uac00 \uc18c\uc2e4\ub418\ub294 \ubb38\uc81c\ub85c \uc11c\ub85c \ub2e4\ub978 \ucd95\uc73c\ub85c \ud68c\uc804\uc744 \uc544\ubb34\ub9ac \ud574\ub3c4 \uc624\uc9c1 \ud55c\uac1c\uc758 \ucd95\uc5d0 \ub300\ud574\uc11c\ub9cc \ud68c\uc804\ub418\ub294 \ubb38\uc81c\uc785\ub2c8\ub2e4. \uc774\ub7ec\ud55c \uc774\uc720\ub85c \uac1d\uccb4\uc758 \ud68c\uc804 \uc815\ubcf4\ub294 \ud56d\uc0c1 \ucffc\ud130\ub2c8\uc548 \uc18d\uc131\uc5d0 \uc800\uc7a5\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
three.js\uc774 \uacfc\uac70 \ubc84\uc804\uc5d0\uc11c\ub294 useQuaternion\uc774\ub77c\ub294 \uc18d\uc131\uc744 \uc81c\uacf5\ud558\uc5ec false\ub85c \uc9c0\uc815\ud558\uba74 \uc624\uc77c\ub7ec \uac01\uc744 \uc0ac\uc6a9\ud574 matrix \uc18d\uc131\uc744 \uc7ac\uacc4\uc0b0\ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubc29\uc2dd\uc740 \ud3d0\uae30 \ub418\uc5c8\uc73c\uba70 \ub9cc\uc57d \uc774\ub7f0 \ubc29\uc2dd\uc758 \uc0ac\uc6a9\uc774 \ud544\uc694\ud558\ub2e4\uba74 setRotationFromEuler \ub9e4\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uac1d\uccb4\uc758 quaternion \uc18d\uc131\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\ub3c4\ub85d \ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\uc774 \uae00\uc740 three.js\uc758 \uacf5\uc2dd \uc0ac\uc774\ud2b8\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \uae00\uc744 \ud55c\uae00\ub85c \ubc88\uc5ed\ub41c \ub0b4\uc6a9\uc73c\ub85c \ub0b4\uc6a9\uc744 \uc880\ub354 \uc774\ud574\ud558\uae30 \uc27d\uac8c \ubcf4\uac15\ud558\uc5ec \uc7ac \uc791\uc131\ud558\uc600\uc2b5\ub2c8\ub2e4.. three.js\ub294 \ud589\ub82c\uc744 \uc0ac\uc6a9\ud574 3\ucc28\uc6d0 \ubcc0\ud658(\uc774\ub3d9, \ud68c\uc804, \ud06c\uae30)\uc5d0 \ub300\ud55c \uc815\ubcf4\ub97c \uc778\ucf54\ub529\ud569\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc778\ucf54\ub529\uc774\ub77c\ub294 \uc758\ubbf8\uac00 \uc218\ud559\uc801\uc774\uc9c0 \ubabb\ud574 \ud63c\ub780\uc2a4\ub7ec\uc6b4\ub370 \uc778\ucf54\ub529\uc774\ub77c\uace0 \ud55c \uc774\uc720\ub294 \uc774\ub3d9\uacfc \ud68c\uc804 \uadf8\ub9ac\uace0 \ud06c\uae30\uc5d0 \ub300\ud55c \uac12\uc744 \uac01\uac01\uc758 \uc18d\uc131\uc73c\ub85c \uac1c\ubc1c\uc790\uac00 \uc9c0\uc815\ud558\uba74 4×4 \ud06c\uae30\uc758 \ud589\ub82c \uc694\uc18c\uc758 \uac12\uc73c\ub85c \uacc4\uc0b0\ub418\uc5b4\uc838 \uc9c0\uc815\ub41c\ub2e4\ub294 \uc758\ubbf8\uc785\ub2c8\ub2e4. Object3D … <\/p>\n
\ub354 \ubcf4\uae30 “three.js\uc5d0\uc11c\uc758 \ud589\ub82c \ubcc0\ud658(Matrix Transformations)”<\/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],"tags":[],"class_list":["post-14178","post","type-post","status-publish","format-standard","hentry","category-three-js"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14178","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=14178"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14178\/revisions"}],"predecessor-version":[{"id":14182,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14178\/revisions\/14182"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14178"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}