{"id":15824,"date":"2025-04-02T13:31:31","date_gmt":"2025-04-02T04:31:31","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15824"},"modified":"2025-04-02T14:46:12","modified_gmt":"2025-04-02T05:46:12","slug":"3dthree-js-%ec%9b%b9%ec%9d%84-electron%ec%9d%84-%ec%9d%b4%ec%9a%a9%ed%95%b4-%ec%96%b4%ed%94%8c%eb%a6%ac%ec%bc%80%ec%9d%b4%ec%85%98%ec%9c%bc%eb%a1%9c-%eb%a7%8c%eb%93%a4%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15824","title":{"rendered":"three.js \uc6f9\uc744 Electron\uc744 \uc774\uc6a9\ud574 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \ub9cc\ub4e4\uae30 (1\/3)"},"content":{"rendered":"<p>\uc6f9\uc740 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub97c \ud1b5\ud574 URL\ub9cc \uc54c\uba74 \uc5b4\ub514\uc11c\ub4e0 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc811\uadfc\uc131 &#8216;\uac11&#8217; \uae30\uc220\uc774\ub2e4. \uadf8\ub7ec\ub098 \uc774 \uc6f9\uc740 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc774 \uc788\ub294\ub370 \ubc14\ub85c \uc778\ud130\ub137\uc774 \ub418\ub294 \ud658\uacbd\uc774\uc5ec\uc57c \ud558\uace0 \ub610 \uae30\ubcf8\uc801\uc73c\ub85c \ub85c\uceec \ub9ac\uc18c\uc2a4\uc5d0 \uc790\uc720\ub86d\uac8c \uc811\uadfc\ud560 \uc218 \uc5c6\ub2e4\ub294 \uc810\uc774\ub2e4. (\ubb3c\ub860 \uc6f9\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\uc790\uc758 \uc778\ud130\ub809\uc158\uc744 \ud1b5\ud574 \ub85c\uceec \ub9ac\uc18c\uc2a4\uc744 \uc811\uadfc\ud560 \uc218 \uc788\uae30\ub294 \ud558\ub2e4.)<\/p>\n<p>\uc544\ub798\uc758 \ub3d9\uc601\uc744 \ubcf4\uc790. three.js\ub97c \uc774\uc6a9\ud574 \uac04\ub2e8\ud55c 3D \ubdf0 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5c8\uace0 \ub0b4 PC\uc5d0 \uc800\uc7a5\ub41c \ubaa8\ub378 \ud30c\uc77c\uc744 \uc5f4\uc5b4 \ud45c\uc2dc\ud55c\ub2e4. \ubd84\uba85 \uc6f9\uc73c\ub85c \ub9cc\ub4e4\uc5c8\uc9c0\ub9cc \uc774 \ud504\ub85c\uadf8\ub7a8\uc758 \ud0c0\uc774\ud2c0\uc744 \ubcf4\uba74 \ud06c\ub86c\ub4f1\uacfc \uac19\uc740 \ud504\ub85c\uadf8\ub7a8\uc774 \uc544\ub2cc \ub3c5\uc790\uc801\uc778 \ud504\ub85c\uadf8\ub7a8\uc774\ub77c\ub294 \uac83\uc744 \uc54c \uc218 \uc788\ub2e4. \uc774 \ud504\ub85c\uadf8\ub7a8\uc740 \uc6d0\ub798 \uc6f9\uc774\uc600\ub358 \uc544\uc774\ub97c Electron\uc774\ub77c\ub294 \uae30\uc220\uc744 \uc774\uc6a9\ud574 \uc778\ud130\ub137 \uc5c6\uc774\ub3c4 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \ub2e8\ub3c5 \uc2e4\ud589 \ud30c\uc77c\ub85c \ub9cc\ub4e4\uc5b4 \ub0b8 \uacb0\uacfc\uc774\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"100%\"><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/electron_threejs.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\uc704\uc758 \uacb0\uacfc\ub97c \ub9cc\ub4e4\uae30 \uc704\ud55c \ubc29\ubc95\uc744 \uc720\ud29c\ube0c \uc601\uc0c1\uc73c\ub85c \ub9cc\ub4e4\uc5b4 \uc62c\ub9b4 \uc608\uc815\uc778\ub370, \uadf8\uc804\uc5d0 \ube14\ub85c\uadf8\uc5d0 \uc815\ub9ac\ud558\uae30 \uc704\ud55c \ubaa9\uc801\uc73c\ub85c \uc774 \uae00\uc744 \uc791\uc131\ud55c\ub2e4.<\/p>\n<p>\uba3c\uc800 \uac04\ub2e8\ud55c \uc6f9\ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4. \ub098\ub294 \ub2e4\uc74c git \uba85\ub839\uc744 \ud1b5\ud574 \uc774\ubbf8 \uc791\uc131\ub41c \ud504\ub85c\uc81d\ud2b8\ub97c \uac00\uc838\uc654\ub2e4.<\/p>\n<p><code>git clone https:\/\/github.com\/GISDEVCODE\/threejs-with-javascript-starter.git .<\/code><\/p>\n<p>\ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud558\uace0 \uc2e4\ud589\uae4c\uc9c0\ud574\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uacb0\uacfc\ub97c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-02-134620.png\" alt=\"\" width=\"1919\" height=\"1079\" class=\"aligncenter size-full wp-image-15837\" \/><\/p>\n<p>\uc774 \uc2e4\ud589 \uacb0\uacfc\ub97c \ubc30\ud3ec \ubc84\uc804\uc73c\ub85c \ub9cc\ub4e4\uc5b4\uc57c \ud55c\ub2e4. Electron\uc740 \uc6f9 \ud398\uc774\uc9c0\uc5d0 \ub300\ud574 \ubc30\ud3ec \ubc84\uc804\uc744 \ub300\uc0c1\uc73c\ub85c \ud558\uae30 \ub54c\ubb38\uc774\ub2e4. \uc774 \ud504\ub85c\uc81d\ud2b8\uc758 \uacbd\uc6b0 \ubc30\ud3ec \uba85\ub839\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n<p><code>npm run build<\/code><\/p>\n<p>\uc704\uc758 \uba85\ub839\uc744 \uc2e4\ud589\ud558\uae30\uc5d0 \uc55e\uc11c \uc544\ub798 \uae00\uc744 \ucc38\uace0\ud574\uc11c \uc190\uc774 \ub35c \uac00\ub3c4\ub85d \ub9cc\ub4dc\ub294 \uac83\uc744 \ucd94\ucc9c\ud55c\ub2e4.<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"r4QcScUsw2\"><p><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15628\">Vite\ub85c \uac1c\ubc1c\ub41c \uc6f9\uc571 \ubc30\ud3ec \uc2dc \uc8fc\uc758\uc810<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Vite\ub85c \uac1c\ubc1c\ub41c \uc6f9\uc571 \ubc30\ud3ec \uc2dc \uc8fc\uc758\uc810&#8221; &#8212; GIS Developer\" src=\"http:\/\/www.gisdeveloper.co.kr\/?p=15628&#038;embed=true#?secret=eIN8R7zuJZ#?secret=r4QcScUsw2\" data-secret=\"r4QcScUsw2\" width=\"525\" height=\"296\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>\ubc30\ud3ec \ubc84\uc804\uc744 \ub9cc\ub4e4\uba74 dist\ub77c\ub294 \ud3f4\ub354\uc5d0 \uadf8 \uacb0\uacfc\uac00 \uc0dd\uc131\ub418\uace0 \uc774 dist \ud3f4\ub354\uc758 \uacb0\uacfc\ub97c Electron\uc73c\ub85c \ub2e8\ub3c5 \uc2e4\ud589\uc774 \uac00\ub2a5\ud55c \ud504\ub85c\uadf8\ub7a8\uc73c\ub85c \ub9cc\ub4e4 \uc218 \uc788\ub2e4. \uc774\ub97c \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc73c\ub85c \ud544\uc694\ud55c \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud55c\ub2e4.<\/p>\n<p><code>npm i electron --save-dev<\/code><\/p>\n<p>Electron\uc5d0\ub9cc \uad00\ub828\ub41c \uc18c\uc2a4\ucf54\ub4dc\ub97c \ub530\ub85c \uad00\ub9ac\ud558\uae30 \uc704\ud574 \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c electron \ud3f4\ub354\ub97c \ub9cc\ub4e4\uace0 electron-run.cjs\uc640 preload.js \ud30c\uc77c\uc744 \ub9cc\ub4e0\ub2e4. \ud655\uc7a5\uc790\uac00 \uac01\uac01 cjs\uc640 js\ub77c\ub294 \uc810\uc5d0 \uc720\uc758\ud558\uc790. electron-run.cjs\uc758 \ucf54\ub4dc\ub97c \ub2e4\uc74c\ucc98\ub7fc \uc785\ub825\ud55c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst { app, BrowserWindow, ipcMain } = require('electron');\r\nconst path = require('path');\r\n\r\nlet win = null;\r\nconst createWindow = () => {\r\n  win = new BrowserWindow({\r\n    width: 1024,\r\n    height: 768,\r\n    webPreferences: {\r\n      nodeIntegration: true,\r\n      preload: path.resolve(\"electron\/preload.js\")\r\n    }\r\n  });\r\n\r\n  win.loadFile(`${path.join(__dirname, '..\/dist\/index.html')}`);\r\n};\r\n\r\napp.whenReady().then(() => {\r\n  createWindow();\r\n\r\n  app.on('activate', () => {\r\n    if (BrowserWindow.getAllWindows().length === 0) {\r\n      createWindow();\r\n    }\r\n  });\r\n});\r\n\r\napp.on('window-all-closed', () => {\r\n  if (process.platform !== 'darwin') {\r\n    app.quit();\r\n  }\r\n});\r\n<\/pre>\n<p>package.json\uc5d0 \uc704\uc758 electron-run.cjs\ub97c \ucc38\uc870\ub97c \ub2e4\uc74c\ucc98\ub7fc \ud574\uc900\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n{\r\n  \"main\": \".\/electron\/electron-run.cjs\",\r\n  ...\r\n\r\n  \"scripts\": {\r\n    ...\r\n    \"electron\": \"electron .\"\r\n  },\r\n\r\n  ...\r\n}\r\n<\/pre>\n<p>\uc774\uc81c \uae30\ubcf8\uc801\uc778 \uac83\uc740 \ubaa8\ub450 \ub05d\ub0ac\ub2e4. \ub2e4\uc74c \uba85\ub839\uc744 \ud1b5\ud574 \uc6b0\ub9ac\uc758 \uc6f9\uc774 \ud06c\ub86c\uacfc \uac19\uc740 \ube0c\ub77c\uc6b0\uc800 \uc5c6\uc774\ub3c4 \ub2e8\ub3c5 \uc2e4\ud589 \uac00\ub2a5\ud55c \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \ud0c4\uc0dd\uc2dc\ud0a4\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc744 \uc2e4\ud589\ud55c\ub2e4.<\/p>\n<p><code>npm run electron<\/code><\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/04\/\uc2a4\ud06c\ub9b0\uc0f7-2025-04-02-140833.png\" alt=\"\" width=\"900\" class=\"aligncenter size-full wp-image-15846\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc6f9\uc740 \uc6f9\ube0c\ub77c\uc6b0\uc800\ub97c \ud1b5\ud574 URL\ub9cc \uc54c\uba74 \uc5b4\ub514\uc11c\ub4e0 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \uc811\uadfc\uc131 &#8216;\uac11&#8217; \uae30\uc220\uc774\ub2e4. \uadf8\ub7ec\ub098 \uc774 \uc6f9\uc740 \uce58\uba85\uc801\uc778 \ub2e8\uc810\uc774 \uc788\ub294\ub370 \ubc14\ub85c \uc778\ud130\ub137\uc774 \ub418\ub294 \ud658\uacbd\uc774\uc5ec\uc57c \ud558\uace0 \ub610 \uae30\ubcf8\uc801\uc73c\ub85c \ub85c\uceec \ub9ac\uc18c\uc2a4\uc5d0 \uc790\uc720\ub86d\uac8c \uc811\uadfc\ud560 \uc218 \uc5c6\ub2e4\ub294 \uc810\uc774\ub2e4. (\ubb3c\ub860 \uc6f9\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\uc790\uc758 \uc778\ud130\ub809\uc158\uc744 \ud1b5\ud574 \ub85c\uceec \ub9ac\uc18c\uc2a4\uc744 \uc811\uadfc\ud560 \uc218 \uc788\uae30\ub294 \ud558\ub2e4.) \uc544\ub798\uc758 \ub3d9\uc601\uc744 \ubcf4\uc790. three.js\ub97c \uc774\uc6a9\ud574 \uac04\ub2e8\ud55c 3D \ubdf0 \ud398\uc774\uc9c0\ub97c \ub9cc\ub4e4\uc5c8\uace0 \ub0b4 PC\uc5d0 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15824\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js \uc6f9\uc744 Electron\uc744 \uc774\uc6a9\ud574 \uc5b4\ud50c\ub9ac\ucf00\uc774\uc158\uc73c\ub85c \ub9cc\ub4e4\uae30 (1\/3)&#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":[1],"tags":[],"class_list":["post-15824","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15824","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=15824"}],"version-history":[{"count":24,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15824\/revisions"}],"predecessor-version":[{"id":15830,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15824\/revisions\/15830"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15824"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15824"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15824"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}