{"id":10951,"date":"2021-03-13T23:03:07","date_gmt":"2021-03-13T14:03:07","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=10951"},"modified":"2022-10-30T08:38:33","modified_gmt":"2022-10-29T23:38:33","slug":"three-js%ec%97%90%ec%84%9c-%ed%8f%b4%eb%a6%ac%ea%b3%a4-%ea%b7%b8%eb%a6%ac%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=10951","title":{"rendered":"three.js\uc5d0\uc11c \ud3f4\ub9ac\uace4, \ud3f4\ub9ac\ub77c\uc778 \uadf8\ub9ac\uae30"},"content":{"rendered":"<p>three.js\uc5d0\uc11c \ud3f4\ub9ac\uace4(Polygon)\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc120\uc758 \uad75\uae30\uc5d0 \ub300\ud55c API\ub294 \uc9c0\uc6d0\ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ubc18\uc601\ub418\uc9c0 \ubabb\ud558\ub294 \uc810\uc774 \uc544\uc27d\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst starShape = new THREE.Shape();\r\nstarShape.moveTo(0, 5);\r\nstarShape.lineTo(1, 1);\r\nstarShape.lineTo(5, 0);\r\nstarShape.lineTo(1, -1);\r\nstarShape.lineTo(0, -5);\r\nstarShape.lineTo(-1, -1);\r\nstarShape.lineTo(-5, 0);\r\nstarShape.lineTo(-1, 1);\r\n\r\nconst geometry = new THREE.ShapeGeometry( starShape );\r\nconst material = new THREE.MeshBasicMaterial( { \r\n    color: 0x00ff00, \r\n    wireframe: true \r\n});\r\n\r\nconst mesh = new THREE.Line( geometry, material ) ;\r\nscene.add( mesh );\r\n\r\nthis.mesh = mesh;\r\n<\/pre>\n<p>\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2021\/03\/three.js_draw_polygon.png\" alt=\"\" width=\"1562\" height=\"1550\" class=\"aligncenter size-full wp-image-10952\" \/><\/p>\n<p>\ub2e4\uc74c\uc740 \ud3f4\ub9ac\ub77c\uc778(Polyline)\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \ub9c8\ucc2c\uac00\uc9c0\ub85c \uc120\uc758 \uad75\uae30 \uc9c0\uc815\uc744 \uc704\ud574 \uac12\uc744 \uc124\uc815\ud574\ub3c4 \uad75\uae30\ub294 \ud56d\uc0c1 1\ub85c \ud45c\ud604\ub429\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst points = [\r\n    new THREE.Vector3(-10, -5, 0), \/\/ {x: -10, y: -5, z: 0},\r\n    new THREE.Vector3(-3, 5, 0),\r\n    new THREE.Vector3(0, 1, 0),\r\n    new THREE.Vector3(3, 5, 0),\r\n    new THREE.Vector3(10, -5, 0)\r\n    ];\r\n\r\nconst geometry = new THREE.BufferGeometry()\r\ngeometry.setFromPoints(points);\r\n\r\nconst material = new THREE.LineBasicMaterial({color: 0xffff00, linewidth: 3});\r\n\r\nconst line = new THREE.Line(geometry, material);\r\nscene.add(line);\r\n<\/pre>\n<p>\uc2e4\ud589 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2021\/03\/three.js_draw_polyline.png\" alt=\"\" width=\"1562\" height=\"1550\" class=\"aligncenter size-full wp-image-10956\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>three.js\uc5d0\uc11c \ud3f4\ub9ac\uace4(Polygon)\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc120\uc758 \uad75\uae30\uc5d0 \ub300\ud55c API\ub294 \uc9c0\uc6d0\ud558\uc9c0\ub9cc \uc2e4\uc81c\ub85c \ubc18\uc601\ub418\uc9c0 \ubabb\ud558\ub294 \uc810\uc774 \uc544\uc27d\uc2b5\ub2c8\ub2e4. const starShape = new THREE.Shape(); starShape.moveTo(0, 5); starShape.lineTo(1, 1); starShape.lineTo(5, 0); starShape.lineTo(1, -1); starShape.lineTo(0, -5); starShape.lineTo(-1, -1); starShape.lineTo(-5, 0); starShape.lineTo(-1, 1); const geometry = new THREE.ShapeGeometry( starShape ); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true }); const mesh &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=10951\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js\uc5d0\uc11c \ud3f4\ub9ac\uace4, \ud3f4\ub9ac\ub77c\uc778 \uadf8\ub9ac\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,139],"tags":[],"class_list":["post-10951","post","type-post","status-publish","format-standard","hentry","category-three-js","category-webgl"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10951","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=10951"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10951\/revisions"}],"predecessor-version":[{"id":10955,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/10951\/revisions\/10955"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10951"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}