{"id":15436,"date":"2024-11-21T11:20:21","date_gmt":"2024-11-21T02:20:21","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15436"},"modified":"2024-11-23T11:26:26","modified_gmt":"2024-11-23T02:26:26","slug":"three-js%ec%97%90%ec%84%9c-%eb%91%90%ea%bb%98%eb%a5%bc-%ea%b0%96%eb%8a%94-%eb%9d%bc%ec%9d%b8","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15436","title":{"rendered":"three.js\uc5d0\uc11c \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778"},"content":{"rendered":"

OpenGL\uc774\ub098 \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 WebGL\uc5d0\uc11c 3D \uadf8\ub798\ud53d\uc5d0\uc11c \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778\uc744 \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc6d0\ud558\ub294 \ub9cc\ud07c\uc758 \ub450\uaed8\ub97c \ud45c\ud604\ud558\uae30 \uc704\ud55c \ubcfc\ub968\uc744 \uac16\ub294 \ub9e4\uc2dc\ub97c \uad6c\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. 3D \uadf8\ub798\ud53d\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub77c\uc778\u001d\uc744 \uc624\uc9c1 1 \ud53d\uc140\ub9cc\ud07c\uc758 \ub450\uaed8\ub85c \ud45c\ud604\ud560 \uc218 \uc788\ub2e4\ub294 \uc81c\uc57d\uc774 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc0ac\uc2e4 \uc774\ub7f0 \uc81c\uc57d\uc740 OpenGL\uc758 \uc81c\uc57d\uc740 \uc544\ub2c8\uace0 \uc774\ub97c \uad6c\ud604\ud558\ub294 \ucabd\uc5d0\uc11c\uc758 \ud45c\uc900\uc744 \ucda9\uc871\ud558\uc9c0 \ubabb\ud588\ub2e4\uace0 \ubcf4\ub294\uac8c \ub9de\uc2b5\ub2c8\ub2e4. \uc6d0\ub798 OpenGL\uc740 \ub77c\uc778\uc5d0 \ub300\ud574\uc11c\ub3c4 \ub450\uaed8\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\uace0 \uc774\uc5d0 \ub9de\uac8c \ub77c\uc778\uc744 \ud45c\ud604\ud574\uc57c\ud55c\ub2e4\ub77c\ub294 \ud45c\uc900\uc744 \uc815\ud588\uc9c0\ub9cc \uc774 \ud45c\uc900\uc744 \uad6c\ud604\ud558\ub294 \ucabd\uc5d0\uc11c \uc774\ub97c \uad6c\ud604\ud558\uc9c0 \uc54a\uc558\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4.<\/p>\n

three.js\uc5d0\uc11c\ub3c4 \ub77c\uc778\uc744 \ud45c\ud604\ud560\ub54c \uc544\ubb34\ub9ac \ub450\uaed8\uc5d0 \ub300\ud55c \uac12\uc744 \uc124\uc815\ud574\uc918\ub3c4 \ud56d\uc0c1 1 pixel\ub85c \ud45c\ud604\ub429\ub2c8\ub2e4. \ub2e4\ud589\ud788\ub3c4 three.js\ub294 \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778\uc744 \ud45c\ud604\ud558\uae30 \uc704\ud574 \ucda9\ubd84\ud788 \uac80\uc99d\ub41c \uae30\ub2a5\uc744 Line2\ub77c\ub294 \ud655\uc7a5 Addon\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 Line2\ub97c \uc0ac\uc6a9\ud558\uba74 \uc6d0\ud558\ub294 \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778\uc744 \ud45c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc774 Line2\ub97c \uc774\uc6a9\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 import\ubb38\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n

\r\nimport { ..., Line2, LineMaterial, LineGeometry, GeometryUtils } from \"three\/addons\/Addons.js\"\r\n<\/pre>\n
\uadf8\ub9ac\uace0 \uc6d0\ud558\ub294 \ud615\ud0dc\uc758 \ub77c\uc778\uc758 \uc88c\ud45c\uc640 \uc0c9\uc0c1\uc744 \ud1b5\ud574 \ub77c\uc778\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\r\n_setupModel() {\r\n  const positions = [];\r\n  const colors = [];\r\n  const points = GeometryUtils.hilbert3D(\r\n    new THREE.Vector3(0, 0, 0), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7);\r\n  const spline = new THREE.CatmullRomCurve3(points);\r\n  const divisions = Math.round(3 * points.length);\r\n  const point = new THREE.Vector3();\r\n  const color = new THREE.Color();\r\n\r\n  for (let i = 0, l = divisions; i < l; i++) {\r\n    const t = i \/ l;\r\n    spline.getPoint(t, point);\r\n    positions.push(point.x, point.y, point.z);\r\n    color.setHSL(t, 1, 0.5, THREE.SRGBColorSpace);\r\n    colors.push(color.r, color.g, color.b);\r\n  }\r\n\r\n  const geometry = new LineGeometry();\r\n  geometry.setPositions(positions);\r\n  geometry.setColors(colors);\r\n\r\n  const matLine = new LineMaterial({\r\n    \/\/ wireframe: true,\r\n    \/\/ color: 0xffffff,\r\n    vertexColors: true,\r\n\r\n    \/\/ worldUnits: false,\r\n    linewidth: 10, \/\/ worldUnits\uc774 false\uc77c \uacbd\uc6b0 pixel \ub2e8\uc704\r\n\r\n    \/\/ alphaToCoverage: true,\r\n\r\n    \/\/ dashed: true,\r\n    \/\/ dashSize: 3,\r\n    \/\/ gapSize: 1,\r\n    \/\/ dashScale: 1,\r\n  });\r\n\r\n  const line = new Line2(geometry, matLine);\r\n  line.computeLineDistances();\r\n  line.scale.set(1, 1, 1);\r\n  this._scene.add(line);\r\n}\r\n<\/pre>\n
\uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n
\uc704\uc758 \uacb0\uacfc\ub294 \ub2e8\uc21c\ud788 \uc120\uc73c\ub85c \ubcf4\uc774\uc9c0\ub9cc \uc0ac\uc2e4 \ub9e4\uc2dc\uc785\ub2c8\ub2e4. \ucf54\ub4dc \uc911 LineMaterial\uc5d0 wireframe\uc744 true\ub85c \uc124\uc815\ud558\uba74 \ub2e4\uc74c\ucc98\ub7fc \uba74\uc73c\ub85c \uad6c\uc131\ub41c \ub9e4\uc2dc\ub77c\ub294 \uc810\uacfc \ud56d\uc0c1 \uce74\uba54\ub77c\ub97c \ud5a5\ud558\ub3c4\ub85d(\ube4c\ubcf4\ub4dc) \uc124\uc815\ub418\uc5b4 \uc788\ub2e4\ub290 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
OpenGL\uc774\ub098 \uc774\ub97c \uae30\ubc18\uc73c\ub85c \ud558\ub294 WebGL\uc5d0\uc11c 3D \uadf8\ub798\ud53d\uc5d0\uc11c \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778\uc744 \ud45c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc6d0\ud558\ub294 \ub9cc\ud07c\uc758 \ub450\uaed8\ub97c \ud45c\ud604\ud558\uae30 \uc704\ud55c \ubcfc\ub968\uc744 \uac16\ub294 \ub9e4\uc2dc\ub97c \uad6c\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. 3D \uadf8\ub798\ud53d\uc5d0\uc11c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub77c\uc778\u001d\uc744 \uc624\uc9c1 1 \ud53d\uc140\ub9cc\ud07c\uc758 \ub450\uaed8\ub85c \ud45c\ud604\ud560 \uc218 \uc788\ub2e4\ub294 \uc81c\uc57d\uc774 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc0ac\uc2e4 \uc774\ub7f0 \uc81c\uc57d\uc740 OpenGL\uc758 \uc81c\uc57d\uc740 \uc544\ub2c8\uace0 \uc774\ub97c \uad6c\ud604\ud558\ub294 \ucabd\uc5d0\uc11c\uc758 \ud45c\uc900\uc744 \ucda9\uc871\ud558\uc9c0 \ubabb\ud588\ub2e4\uace0 \ubcf4\ub294\uac8c \ub9de\uc2b5\ub2c8\ub2e4. \uc6d0\ub798 OpenGL\uc740 \ub77c\uc778\uc5d0 \ub300\ud574\uc11c\ub3c4 \ub450\uaed8\ub97c … <\/p>\n
\ub354 \ubcf4\uae30 “three.js\uc5d0\uc11c \ub450\uaed8\ub97c \uac16\ub294 \ub77c\uc778”<\/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-15436","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\/15436","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=15436"}],"version-history":[{"count":8,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15436\/revisions"}],"predecessor-version":[{"id":15443,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15436\/revisions\/15443"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15436"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}