{"id":16382,"date":"2025-11-14T10:24:50","date_gmt":"2025-11-14T01:24:50","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16382"},"modified":"2025-11-14T10:26:01","modified_gmt":"2025-11-14T01:26:01","slug":"svg-%ed%8c%8c%ec%9d%bc%ec%9d%84-%ec%99%84%ec%a0%84%ed%95%9c-3d-%eb%aa%a8%eb%8d%b8%eb%a1%9c-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16382","title":{"rendered":"SVG \ud30c\uc77c\uc744 \uc644\uc804\ud55c 3D \ubaa8\ub378\ub85c \ub9cc\ub4e4\uae30"},"content":{"rendered":"<p>SVG \ud30c\uc77c\uc740 2\ucc28\uc6d0 \ubca1\ud130 \uadf8\ub798\ud53d \ub370\uc774\ud130\uc778\ub370, \uc774\ub97c \uc774\uc6a9\ud574 three.js\uc5d0\uc11c \uc644\uc804\ud55c 3\ucc28\uc6d0 \ubaa8\ub378\ub85c \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\uc758 \uc815\ub9ac\uc785\ub2c8\ub2e4. \uba3c\uc800 \uc0ac\uc6a9\ud560 SVG \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/11\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-11-14-10.11.42.png\" alt=\"\" width=\"1388\" height=\"1384\" class=\"aligncenter size-full wp-image-16383\" \/><\/p>\n<p>\uc774 SVG \ub370\uc774\ud130 \ud30c\uc77c\uc744 3\ucc28\uc6d0 \ubaa8\ub378, \uc989 Mesh\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 Geometry\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 three.js\ub294 SVG \ub370\uc774\ud130\ub97c \ubc1b\uc544 \ucc98\ub9ac\ud574\uc8fc\ub294 SVGLoader\ub97c \uc81c\uacf5\ud574\uc8fc\uace0 SVGLoader\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \ud574\uc11d\ud574 \uc785\uccb4\uac10\uc788\ub294 Geometry\ub85c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 ExtrudeGeometry\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ub458\uc744 \uc774\uc6a9\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst svg = await new SVGLoader().loadAsync(\".\/flower.svg\");\r\nconst paths = svg.paths\r\nconst geometries = [];\r\n\r\nfor (let i = 0; i < paths.length; i++) {\r\n  const path = paths[i];\r\n\r\n  const shapes = SVGLoader.createShapes(path);\r\n  const shapeGeometry = new THREE.ExtrudeGeometry(shapes, {\r\n    depth: 1,\r\n    steps: 2,\r\n    curveSegments: 16,\r\n    bevelEnabled: true,\r\n    bevelThickness: 0.5,\r\n    bevelSize: .5,\r\n    bevelOffset: -.15,\r\n    bevelSegments: 8,\r\n  });\r\n  geometries.push(shapeGeometry);\r\n}\r\n\r\nconst geometry = BufferGeometryUtils.mergeGeometries(geometries)\r\ngeometry.center();\r\ngeometry.rotateZ(Math.PI);\r\ngeometry.scale(.15, .15, .15);\r\n<\/pre>\n<p>\uc774\ub807\uac8c \ub9cc\ub4e4\uc5b4\uc9c4 geometry\ub97c \uc2dc\uac01\ud574 \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/11\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-11-14-10.16.42.png\" alt=\"\" width=\"1774\" height=\"1436\" class=\"aligncenter size-full wp-image-16385\" \/><\/p>\n<p>\ube59\uace0! \ud558\uc9c0\ub9cc \uace7 \uaf43\uc758 \uc911\uc2ec\uc5d0 \ub300\ud55c \uad6c\uba4d(hole)\uc774 \uc774\uc0c1\ud558\uac8c \ud45c\ud604\ub418\uace0 \uc788\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc9c1\uad00\uc744 \ud1b5\ud574 \uc7ac\uc9c8\uc758 \uc18d\uc131(side: THREE.DoubleSide)\uc744 \uc870\uc815\ud574 \ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc\ub97c \ubcfc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/11\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-11-14-10.19.00.png\" alt=\"\" width=\"1774\" height=\"1436\" class=\"aligncenter size-full wp-image-16387\" \/><\/p>\n<p>\uc544! \uaf43 \uc911\uc2ec\uc758 \uad6c\uba4d\uc758 \ub178\ub9d0\ubca1\ud130\uac00 \ub4a4\uc9da\ud614\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. SVG\ub294 \uad6c\uba4d\uc744 \uc815\uc758\ud558\uae30 \uc704\ud574\uc11c \uc815\uc810\uc758 \uad6c\uc131 \uc21c\uc11c\ub97c \uc2dc\uacc4 \ubc29\ud5a5\uc73c\ub85c \ud574\uc57c \ud569\ub2c8\ub2e4. \uad6c\uba4d\uc774 \uc544\ub2cc \uc678\uacfd\uc740 \ubc18\uc2dc\uacc4 \ubc29\ud5a5\uc73c\ub85c \uad6c\uc131\ud574\uc57c \ud558\uad6c\uc694. \uadf8\ub7f0\ub370 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 SVG \ub370\uc774\ud130\ub294 \uc774\ub7ec\ud55c \uaddc\uce59\uc744 \ubb34\uc2dc\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc815\ud574\uc900 \uaddc\uce59\uc744 \ub530\ub974\ub294 SVG \ub370\uc774\ud130\ub97c \uc81c\uacf5\ubc1b\uc544 \uc0ac\uc6a9\ud558\uba74 \uc88b\uaca0\uc9c0\ub9cc, \uc800\ub294 \uadf8\ub807\uac8c \ud558\uc9c0 \uc54a\uace0 \ucf54\ub4dc\ub97c \ud1b5\ud574 \ud574\ub2f9 \uaddc\uce59\uc744 \ub530\ub974\ub3c4\ub85d \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4.\ud574\ub2f9 \ucf54\ub4dc\uac00 \uc801\uc6a9\ub41c \uac83\uc740 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst svg = await new SVGLoader().loadAsync(\".\/flower.svg\");\r\nconst paths = svg.paths\r\nconst geometries = [];\r\n\r\nfor (let i = 0; i < paths.length; i++) {\r\n  const path = paths[i];\r\n\r\n  const correctedShapes = [];\r\n  const shapes = SVGLoader.createShapes(path);\r\n  for (let j = 0; j < shapes.length; j++) {\r\n    const shape = shapes[j];\r\n\r\n    \/\/ \uc678\uacfd \ud3ec\uc778\ud2b8\r\n    const outerPts = shape.getPoints(64);\r\n    if (THREE.ShapeUtils.isClockWise(outerPts)) outerPts.reverse();\r\n    const newShape = new THREE.Shape(outerPts);\r\n\r\n    \/\/ \ud640 \ucc98\ub9ac\r\n    shape.holes.forEach(hole => {\r\n      const holePts = hole.getPoints(64);\r\n      \/\/ \ud640\uc740 \uc2dc\uacc4 \ubc29\ud5a5\uc774\uc5b4\uc57c \ud558\ubbc0\ub85c, \ubc18\ub300\uc778 \uacbd\uc6b0 \ub4a4\uc9d1\uc74c\r\n      if (!THREE.ShapeUtils.isClockWise(holePts)) holePts.reverse();\r\n      newShape.holes.push(new THREE.Path(holePts));\r\n    });\r\n\r\n    correctedShapes.push(newShape);\r\n  }\r\n\r\n  const shapeGeometry = new THREE.ExtrudeGeometry(correctedShapes, {\r\n    ...\r\n  });\r\n  geometries.push(shapeGeometry);\r\n}\r\n\r\nconst geometry = BufferGeometryUtils.mergeGeometries(geometries)\r\n...\r\n<\/pre>\n<p>\uc774\uc81c \uacb0\uacfc\ub97c \ubcf4\uba74 \ub2e4\uc74c\ucc98\ub7fc SVG\uc5d0 \ub300\ud55c \uc644\uc804\ud55c \uc9c0\uc624\uba54\ud2b8\ub9ac \uad6c\uc131\uc774 \ub41c \uac83\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/11\/\u1109\u1173\u110f\u1173\u1105\u1175\u11ab\u1109\u1163\u11ba-2025-11-14-10.24.24.png\" alt=\"\" width=\"1774\" height=\"1436\" class=\"aligncenter size-full wp-image-16390\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG \ud30c\uc77c\uc740 2\ucc28\uc6d0 \ubca1\ud130 \uadf8\ub798\ud53d \ub370\uc774\ud130\uc778\ub370, \uc774\ub97c \uc774\uc6a9\ud574 three.js\uc5d0\uc11c \uc644\uc804\ud55c 3\ucc28\uc6d0 \ubaa8\ub378\ub85c \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\uc758 \uc815\ub9ac\uc785\ub2c8\ub2e4. \uba3c\uc800 \uc0ac\uc6a9\ud560 SVG \ud30c\uc77c\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uc774 SVG \ub370\uc774\ud130 \ud30c\uc77c\uc744 3\ucc28\uc6d0 \ubaa8\ub378, \uc989 Mesh\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 Geometry\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud574 three.js\ub294 SVG \ub370\uc774\ud130\ub97c \ubc1b\uc544 \ucc98\ub9ac\ud574\uc8fc\ub294 SVGLoader\ub97c \uc81c\uacf5\ud574\uc8fc\uace0 SVGLoader\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \ud574\uc11d\ud574 \uc785\uccb4\uac10\uc788\ub294 Geometry\ub85c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 ExtrudeGeometry\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ub458\uc744 \uc774\uc6a9\ud55c \ucf54\ub4dc\ub294 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16382\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;SVG \ud30c\uc77c\uc744 \uc644\uc804\ud55c 3D \ubaa8\ub378\ub85c \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,139],"tags":[],"class_list":["post-16382","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\/16382","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=16382"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16382\/revisions"}],"predecessor-version":[{"id":16393,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16382\/revisions\/16393"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16382"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}