![\"\"](\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2023\/06\/simplex-noise.png\")
<\/p>\n
three.js\ub97c \uc774\uc6a9\ud574 \uc2dc\uac01\ud654\ud55c \uacbd\uc6b0\ub85c \ub2e4\uc74c\uacfc \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n\"devDependencies\": {\r\n \"vite\": \"^4.3.9\"\r\n},\r\n\"dependencies\": {\r\n \"simplex-noise\": \"^4.0.1\",\r\n \"three\": \"^0.153.0\",\r\n \"three-fatline\": \"^0.6.1\"\r\n}\r\n<\/pre>\n\uadf8\ub9ac\uace0 \uc8fc\uc694 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n...\r\n\r\nconst noise2D = createNoise2D()\r\n\r\nfunction createLines() {\r\n for(let r=-20; r<20; r++) {\r\n const wnoise = noise2D(0, r*0.125) * 1.0\r\n const lineWidth = 0.25 + Math.pow(wnoise * 0.5 + 1, 2)\r\n\r\n const dashed = Math.random() > 0.5\r\n const dashScale = 1\r\n const dashSize = Math.pow(Math.random(), 2) * 15 + 4\r\n const gapSize = dashSize * (0.5 + Math.random() * 1)\r\n \r\n const material = new LineMaterial({\r\n color: \"rgb(241, 231, 222)\",\r\n linewidth: lineWidth,\r\n resolution: new Vector2(res, res),\r\n dashed,\r\n dashScale,\r\n dashSize,\r\n gapSize\r\n })\r\n\r\n const vertices = []\r\n for(let i=0; i<100; i++) {\r\n let height = 0\r\n \r\n height += noise2D(i * 0.0189 * 1, r * 0.125) * 2.0\r\n height += noise2D(i * 0.0189 * 2, r * 0.125) * 1.0\r\n height += noise2D(i * 0.0189 * 4, r * 0.125) * 0.5\r\n height += noise2D(i * 0.0189 * 8, r * 0.125) * 0.25\r\n height += noise2D(i * 0.0189 * 16, r * 0.125) * 0.125\r\n \r\n vertices.push(\r\n -330 + 660 * (i \/ 100), \r\n height * 20 + r * 16, \r\n 0\r\n )\r\n } \r\n\r\n const geometry = new LineGeometry()\r\n geometry.setPositions(vertices)\r\n \r\n const line = new Line2(geometry, material)\r\n line.computeLineDistances()\r\n \r\n scene.add(line)\r\n }\r\n}\r\n\r\n...\r\n<\/pre>\n\uc644\uc804\ud55c \ucf54\ub4dc\ub294 \uc55e\uc11c \uc5b8\uae09\ud574 \ub4dc\ub9b0 \uc720\ud29c\ube0c \uc601\uc0c1\uc744 \ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
\ubb34\uc791\uc704 \uac12\uc744 \uc5bb\uae30 \uc704\ud55c \ud754\ud55c \ubc29\ubc95\uc740 random API \uc0ac\uc6a9\uc778\ub370, \uc2e4\uc81c\ub85c \ubb34\uc791\uc704 \uac12\uc744 \uc5bb\uae30 \uc704\ud574 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 Noise\ub77c\ub294 \uac1c\ub150\uc774\uace0 \uc774 Noise\ub97c \uc5bb\uae30 \uc704\ud55c \uba87\uac00\uc9c0 \uc54c\uace0\ub9ac\uc998 \uc911 \ud2b9\ud5c8\uc5d0 \ub300\ud55c \uc800\uc791\uad8c \uce68\ud574\uc5d0 \ub300\ud55c \ubb38\uc81c\uac00 \uc5c6\uace0 \ub610 \ud488\uc9c8\uba74\uc5d0\uc11c Simplex Noise\uac00 \ub9ce\uc774 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc544\ub798\ub294 Simplex Noise\uc5d0 \ub300\ud55c \uc2dc\uac01\ud654\uc5d0 \ub300\ud55c \uacb0\uacfc\ubb3c\ub85c \ub204\uad70\uac00\uc758 \uc720\ud29c\ube0c \ucc44\ub110\uc5d0 \uc62c\ub77c\uc628 \uc601\uc0c1\uc758 \ub0b4\uc6a9\uc785\ub2c8\ub2e4. three.js\ub97c \uc774\uc6a9\ud574 \uc2dc\uac01\ud654\ud55c … <\/p>\n