{"id":17310,"date":"2026-10-03T16:10:20","date_gmt":"2026-10-03T07:10:20","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=17310"},"modified":"2026-10-03T16:14:32","modified_gmt":"2026-10-03T07:14:32","slug":"three-js-skymesh%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ed%99%98%ea%b2%bd%ea%b4%91","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=17310","title":{"rendered":"three.js, SkyMesh\ub97c \uc774\uc6a9\ud55c \ud658\uacbd\uad11"},"content":{"rendered":"

SkyMesh<\/code>\ub294 \ud558\ub298\uc5d0 \ub300\ud55c \uc2dc\uac01\uc801\uc778 \ud45c\ud604\uc744 \ud574\uc8fc\ub294 API\uc785\ub2c8\ub2e4. \uc774 SkyMesh<\/code>\ub97c \uc774\uc6a9\ud558\uc5ec \uc2dc\uac01\uc801\uc778 \ud45c\ud604 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc2e4\uc81c \uad11\uc6d0\uc73c\ub85c\uc368 \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc785\ub2c8\ub2e4.<\/p>\n

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

\r\nimport { SkyMesh } from 'three\/addons\/objects\/SkyMesh.js';\r\n<\/pre>\n
\uadf8\ub9ac\uace0 SkyMesh<\/code> \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\r\nprivate sky!: SkyMesh;\r\n\r\nprivate setupSky() {\r\n  const sky = new SkyMesh();\r\n  sky.scale.setScalar(9000);\r\n  \/\/ this.scene.add(sky);\r\n\r\n  sky.sunPosition.value.copy(this.sunLight.position);\r\n  sky.turbidity.value = 3;\r\n  sky.rayleigh.value = 2;\r\n  sky.cloudSpeed.value = 0; \/\/ keep the clouds static, like the WebGL version\r\n  sky.showSunDisc.value = false; \/\/ the sun is represented by the light\r\n\r\n  this.sky = sky;\r\n}\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 SkyMesh<\/code> \uac1d\uccb4\ub97c \uc0dd\uc131\ud588\uace0 \uc788\ub294\ub370, SkyMesh<\/code>\uc758 \uc704\uce58\ub97c \uc7a1\uae30 \uc704\ud574 this.sunLight<\/code>\uc758 position<\/code>\uc744 \ucc38\uace0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uace0\ub3c4\uc640 \ubc29\uc704\uac01\uc744 \ud1b5\ud574 \uc9c1\uc811 \uadf8 \uc704\uce58\ub97c \uc815\ud558\uace0 \uc2f6\ub2e4\uba74 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucc38\uace0\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n
\r\nsunLight.position.setFromSphericalCoords(\r\n  1, \r\n  THREE.MathUtils.degToRad(90 - params.elevation), \r\n  THREE.MathUtils.degToRad(params.azimuth)\r\n);\r\n<\/pre>\n
\uc774\ub97c scene<\/code>\uc5d0 \ucd94\uac00\ud558\uba74 \ud558\ub298\uc774 \ud45c\ud604\ub429\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \ud558\ub298 \ud45c\ud604\ubfd0\ub9cc \uc544\ub2c8\ub77c SkyMesh<\/code>\ub97c \uc774\uc6a9\ud574 \ud658\uacbd\uad11\uc744 \uad6c\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \uc704\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nprivate setupEnvironment() {\r\n  const pmremGenerator = new THREE.PMREMGenerator(this.renderer);\r\n  const sceneEnv = new THREE.Scene();\r\n  sceneEnv.add(this.sky);\r\n\r\n  const renderTarget = pmremGenerator.fromScene(sceneEnv);\r\n  this.scene.environment = renderTarget.texture;\r\n  \/\/ renderTarget.dispose();\r\n\r\n  this.scene.add(this.sky);\r\n}\r\n<\/pre>\n
\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
SkyMesh\ub294 \ud558\ub298\uc5d0 \ub300\ud55c \uc2dc\uac01\uc801\uc778 \ud45c\ud604\uc744 \ud574\uc8fc\ub294 API\uc785\ub2c8\ub2e4. \uc774 SkyMesh\ub97c \uc774\uc6a9\ud558\uc5ec \uc2dc\uac01\uc801\uc778 \ud45c\ud604 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc2e4\uc81c \uad11\uc6d0\uc73c\ub85c\uc368 \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ucf54\ub4dc\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc785\ub2c8\ub2e4. \uba3c\uc800 SkyMesh\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574 \ub2e4\uc74c\uacfc \uac19\uc740 import \ubb38\uc774 \ud544\uc694\ud569\ub2c8\ub2e4. import { SkyMesh } from ‘three\/addons\/objects\/SkyMesh.js’; \uadf8\ub9ac\uace0 SkyMesh \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. private sky!: SkyMesh; private setupSky() { const sky = new SkyMesh(); sky.scale.setScalar(9000); \/\/ this.scene.add(sky); sky.sunPosition.value.copy(this.sunLight.position); … <\/p>\n
\ub354 \ubcf4\uae30 “three.js, SkyMesh\ub97c \uc774\uc6a9\ud55c \ud658\uacbd\uad11”<\/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],"tags":[],"class_list":["post-17310","post","type-post","status-publish","format-standard","hentry","category-three-js"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17310","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=17310"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17310\/revisions"}],"predecessor-version":[{"id":17315,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/17310\/revisions\/17315"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17310"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}