{"id":17257,"date":"2026-09-15T08:56:54","date_gmt":"2026-09-14T23:56:54","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=17257"},"modified":"2026-09-15T08:58:32","modified_gmt":"2026-09-14T23:58:32","slug":"three-js-%ec%9d%b4%eb%8f%99-%ed%9a%8c%ec%a0%84-%ec%8a%a4%ec%bc%80%ec%9d%bc%ec%97%90-%eb%8c%80%ed%95%9c-%ed%96%89%eb%a0%ac-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=17257","title":{"rendered":"three.js, \uc774\ub3d9, \ud68c\uc804, \uc2a4\ucf00\uc77c\uc5d0 \ub300\ud55c \ud589\ub82c \ub9cc\ub4e4\uae30"},"content":{"rendered":"<p>2\uac00\uc9c0 \ubc29\uc2dd\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uba3c\uc800 Object3D\uc758 position, scale, rotation\uc744 \uc9c0\uc815\ud574 \ud589\ub82c\uc744 \ubf51\uc544\ub0b4\ub294 \ub2e4\uc74c\uc758 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\nconst matrixArray = new Float32Array(count * 16);\r\nconst matrixBuffer = new THREE.InstancedBufferAttribute(matrixArray, 16);\r\n\r\nconst dummy = new THREE.Object3D();\r\n\r\nfor (let i = 0; i < count; i++) {\r\n  dummy.position.set(i * 2, 0, 0);\r\n  dummy.rotation.y = Math.PI * 0.25 * i;\r\n  dummy.updateMatrix();\r\n\r\n  \/\/ Matrix4 \ub370\uc774\ud130\ub97c Float32Array\uc758 i * 16 \uc704\uce58\uc5d0 \ubcf5\uc0ac\r\n  dummy.matrix.toArray(matrixArray, i * 16);\r\n}\r\n\r\n\r\n<\/pre>\n<p>2\ubc88\uc9f8\ub294 \uc9c1\uc811 \ud589\ub82c\uc744 \ud1b5\ud574\uc11c \uc5bb\ub294 \uc544\ub798\uc758 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"javascript\">\r\nconst matricesArray = new Float32Array(count * 16)\r\nconst matricesBuffer = new THREE.InstancedBufferAttribute(matricesArray, 16)\r\n\r\nfor (let i = 0; i < count; i++) {\r\n    const progress = i \/ (count - 1)\r\n    const position = new THREE.Vector3((progress - 0.5) * 4, 0, 0)\r\n    const scale = new THREE.Vector3(1, 1, 1)\r\n    const rotation = new THREE.Quaternion()\r\n        .setFromEuler(new THREE.Euler(0, progress * 3, 0))\r\n\r\n    const matrix = new THREE.Matrix4().compose(position, rotation, scale)\r\n    matrix.toArray(matricesArray, i * 16)\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>2\uac00\uc9c0 \ubc29\uc2dd\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uba3c\uc800 Object3D\uc758 position, scale, rotation\uc744 \uc9c0\uc815\ud574 \ud589\ub82c\uc744 \ubf51\uc544\ub0b4\ub294 \ub2e4\uc74c\uc758 \ubc29\uc2dd\uc785\ub2c8\ub2e4. const matrixArray = new Float32Array(count * 16); const matrixBuffer = new THREE.InstancedBufferAttribute(matrixArray, 16); const dummy = new THREE.Object3D(); for (let i = 0; i < count; i++) { dummy.position.set(i * 2, 0, 0); dummy.rotation.y = Math.PI * 0.25 * i; dummy.updateMatrix(); \/\/ &hellip; \n\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=17257\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js, \uc774\ub3d9, \ud68c\uc804, \uc2a4\ucf00\uc77c\uc5d0 \ub300\ud55c \ud589\ub82c \ub9cc\ub4e4\uae30&#8221;<\/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-17257","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\/17257","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=17257"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17257\/revisions"}],"predecessor-version":[{"id":17260,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17257\/revisions\/17260"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17257"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}