{"id":15898,"date":"2025-04-16T18:03:40","date_gmt":"2025-04-16T09:03:40","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15898"},"modified":"2025-04-16T20:13:14","modified_gmt":"2025-04-16T11:13:14","slug":"%eb%a9%80%ed%8b%b0-%ec%b9%b4%eb%a9%94%eb%9d%bc%ec%9d%98-%eb%a0%8c%eb%8d%94%eb%a7%81-%ea%b2%b0%ea%b3%bc%eb%a5%bc-%ed%95%98%eb%82%98%ec%9d%98-scene%ec%97%90-%ed%91%9c%ec%8b%9c-in-three-js","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15898","title":{"rendered":"\uba40\ud2f0 \uce74\uba54\ub77c\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \ud558\ub098\uc758 Scene\uc5d0 \ud45c\uc2dc (in Three.js)"},"content":{"rendered":"<p>\uc5ec\ub7ec \uac1c\uc758 \uce74\uba54\ub77c\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \ud558\ub098\uc758 \uc7a5\uba74\uc5d0 \ud45c\uc2dc\ud574\uc57c\ud560 \ud544\uc694\uac00 \uc0dd\uae34\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \uc2a4\ud0c0\ud06c\ub798\ud504\ud2b8 \uac8c\uc784\uc744 \ubcf4\uba74 \ud654\uba74\uc5d0 2\uac1c\uc758 \uc694\uc18c\ub85c \uad6c\ubd84\ub418\uc5b4 \uc788\ub2e4. \uccab\uc9f8\ub294 \ubbf8\ub2c8\ub9f5\uacfc \uba85\ub839 \uc544\uc774\ucf58\ub4e4\uc774 \ud45c\uc2dc\ub418\ub294 \ucee4\uba58\ud2b8 \uc694\uc18c\uc640 \ub450\ubc88\uc9f8\ub294 \uc2e4\uc81c \uac8c\uc784 \ud50c\ub808\uc774 \uc694\uc18c\uc774\ub2e4. \uc774\ub97c \uad6c\ud604\ud558\ub294 \ubc29\uc2dd\uc740 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uaca0\uc73c\ub098 \uba40\ud2f0 \uce74\uba54\ub77c\ub97c \uc774\uc6a9\ud558\ub294 \ubc29\uc2dd\uc774 \uc788\ub2e4. \uac8c\uc784 \ud50c\ub808\uc774 \uc694\uc18c\ub294 \uc6d0\uadfc\uac10 \uc788\uac8c PerspectiveCamera\ub97c \uc774\uc6a9\ud558\uace0 \ucee4\uba58\ub4dc \uc694\uc18c\ub294 OrthographicCamera\ub85c \uc6d0\uadfc\uac10 \uc5c6\uc774 \ub80c\ub354\ub9c1\ud558\ub294 \uac83\uc774\ub2e4. \uc774\ub807\uac8c \uac01 \uce74\uba54\ub77c\ub85c \ub80c\ub354\ub9c1\ub418\ub294 \uc694\uc18c\ub97c \ud558\ub098\uc758 \uc7a5\uba74\uc5d0 \uc911\ucca9\ud574\uc11c \ud45c\uc2dc\ud558\uba74 \ub41c\ub2e4.<\/p>\n<p>\ub9c8\uc6b0\uc2a4\uc5d0 \ub300\ud55c \uc0c1\ud638\uc791\uc6a9\uc740 Camera\ub97c \uc785\ub825\uac12\uc744 \uac1c\ubcc4 \uc694\uc18c\ub85c \ubc1b\uc73c\ub2c8 \uc5b4\ub5a4 \uac1d\uccb4\ub4e0 \ub9c8\uc6b0\uc2a4 \uc0c1\ud638\uc791\uc6a9\uc744 \uc27d\uac8c \uc5bb\uc744 \uc218 \uc788\ub2e4. \uc774\ubbf8 \uc54c\uace0 \uc788\uaca0\uc9c0\ub9cc Raycast\ub97c \uc774\uc6a9\ud574\uc11c \ub9d0\uc774\ub2e4. \uc5ec\ub7ec\uac1c\uc758 \uce74\uba54\ub77c\ub97c \uc0ac\uc6a9\ud560\ub54c \uc0dd\uac01\ud560 \uac83\uc740 \uc5b4\ub5a4 \uc694\uc18c\ub97c \uc5b4\ub5a4 \uce74\uba54\ub77c\uc5d0 \ud560\ub2f9\ud574 \ub80c\ub354\ub9c1\ud560 \uac83\uc778\uc9c0\uc5d0 \ub300\ud55c \uc9c0\uc815\uc774\ub2e4. \ubb3c\ub860 \ud558\ub098\uc758 \uc694\uc18c\ub97c \uc5ec\ub7ec\uac1c\uc758 \uce74\uba54\ub77c\uc5d0\uc11c \ub3d9\uc2dc\uc5d0 \ub80c\ub354\ub9c1\ud558\ub294 \uac83\ub3c4 \uac00\ub2a5\ud558\ub2e4. \uc774\ub7ec\ud55c \uad6c\ubd84\uc740 Layers\ub77c\ub294 \uae30\ub2a5\uc744 \uc774\uc6a9\ud558\uba74 \ub9e4\uc6b0 \uc9c1\uad00\uc801\uc73c\ub85c \ucc98\ub9ac\ud560 \uc218 \uc788\ub2e4. three.js\uc5d0\uc11c Layers\ub294 \ucd1d 32\uac1c\ub85c \uad6c\uc131\ub41c\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c \ubaa8\ub4e0 \uce74\uba54\ub77c, \uad11\uc6d0, \ub9e4\uc2dc \ub4f1\uc740 0\ubc88\uc9f8 \ub808\uc774\uc5b4\uc5d0 \uc18c\uc18d\ub41c\ub2e4. \uc5b4\ub5a4 \uce74\uba54\ub77c\uac00 \uc18c\uc18d\ub41c \ub808\uc774\uc5b4\uc640 \ub3d9\uc77c\ud55c \ub808\uc774\uc5b4\uc5d0 \uc18c\uc18d\ub41c \uac83\ub4e4\uc740 \ubaa8\ub450 \uce74\uba54\ub77c\ub97c \ud1b5\ud574 \ub80c\ub354\ub9c1\ub41c\ub2e4.<\/p>\n<p>\uc774\ub97c \ucf54\ub4dc\ub85c \uc791\uc131\ud574 \ubcf4\uc790. \uba3c\uc800 \uce74\uba54\ub77c 2\uac1c\ub97c \ub9cc\ub4e4\uc790. \uc27d\uac8c \uc124\uba85\ud558\uae30 \uc704\ud574 \ub458\ub2e4 PerpectiveCamera \uac1d\uccb4\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\n_setupCamera() {\r\n  ...\r\n  \r\n  const aspect = width \/ height;\r\n\r\n  const camera1 = new THREE.PerspectiveCamera(60, aspect, 0.1, 10);\r\n  camera1.layers.enable(1);\r\n  camera1.position.z = 3;\r\n  this._camera1 = camera1;\r\n\r\n  const camera2 = new THREE.PerspectiveCamera(60, aspect, 0.1, 10);\r\n  camera2.layers.enable(2);\r\n  camera2.position.z = 2;\r\n  this._camera2 = camera2;\r\n}\r\n<\/pre>\n<p>camera1\uacfc camera2\ub294 \uac01\uac01 0,1 \ub808\uc774\uc5b4\uc640 0,2 \ub808\uc774\uc5b4\uc5d0 \uc18c\uc18d\ub418\uc5b4 \uc788\ub2e4. \ub9cc\uc57d camera1\uc744 1\ubc88 \ub808\uc774\uc5b4\uc5d0\ub9cc \uc18c\uc18d\uc2dc\ud0a4\ub824\uba74 camera1.layers.set(1) \ucf54\ub4dc\uba74 \ub41c\ub2e4.<\/p>\n<p>\ub2e4\uc74c\uc740 \ub80c\ub354\ub9c1\ud560 \ub9e4\uc2dc\ub97c \ub2e4\uc74c\ucc98\ub7fc \uad6c\uc131\ud55c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nconst geometryC1 = new THREE.BoxGeometry();\r\nconst materialC1 = new THREE.MeshStandardMaterial();\r\nconst meshC1 = new THREE.Mesh(geometryC1, materialC1);\r\nmeshC1.layers.set(1);\r\nthis._scene.add(meshC1);\r\n\r\nconst geometryC2 = new THREE.BoxGeometry();\r\nconst materialC2 = new THREE.MeshStandardMaterial({ wireframe: true });\r\nconst meshC2 = new THREE.Mesh(geometryC2, materialC2)\r\nmeshC2.layers.set(2);\r\nthis._scene.add(meshC2);\r\n<\/pre>\n<p>meshC1\uc740 1 \ub808\uc774\uc5b4\uc5d0\ub9cc \uc18c\uc18d\ub418\uc5b4 \uc788\ub2e4. meshC2\ub294 2 \ub808\uc774\uc5b4\uc5d0\ub9cc \uc18c\uc18d\ub418\uc5b4 \uc788\ub2e4. \ub9cc\uc57d layers\uc758 set \ub300\uc2e0 enable\ub97c \uc0ac\uc6a9\ud558\uba74 \uae30\ubcf8\uc801\uc73c\ub85c \uc18c\uc18d\ub41c 0\ubc88 \ub808\uc774\uc5b4\uc5d0 \ub300\ud55c \uc18c\uc18d\uc740 \uadf8\ub300\ub85c \uc720\uc9c0\ub418\ubbc0\ub85c \uba85\ud655\ud788 1 \ubc88 \ub808\uc774\uc5b4\uc5d0\ub9cc \uc18c\uc18d\ub418\ub3c4\ub85d set\ub97c \uc0ac\uc6a9\ud588\ub2e4. \uad11\uc6d0\uc5d0 \ub300\ud55c layers \uc124\uc815\uc740 \ud558\uc9c0 \uc54a\uc558\uc73c\ubbc0\ub85c 0 \ub808\uc774\uc5b4\uc5d0 \uc18c\uc18d\ub418\uc5b4 \uc788\ub2e4. camera1\uacfc camera2\uc758 layers\ub97c enable\ub85c \ud574\uc11c \uc124\uc815\ud588\uc73c\ubbc0\ub85c \uac01 \uce74\uba54\ub77c\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \uc18c\uc18d\ub41c 0\ubc88 \ub808\uc774\uc5b4\uc5d0\ub3c4 \uc18c\uc18d\ub418\uc5b4 \uc788\uace0 0 \ub808\uc774\uc5b4\uc5d0 \uc18c\uc18d\ub41c \uad11\uc6d0\uc758 \uc601\ud5a5\uc744 2\uac1c \uce74\uba54\ub77c \ubaa8\ub450 \uc0ac\uc6a9\ud558\uac8c \ub41c\ub2e4.<\/p>\n<p>\uc774\uc81c \ub80c\ub354\ub9c1\uacfc \uad00\ub828\ub41c \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud55c\ub2e4. \uadf8\uc804\uc5d0 Renderer \uac1d\uccb4\uc5d0 \ub300\ud574 \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud558\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nrenderer.autoClearColor = false;\r\n<\/pre>\n<p>\uae30\ubcf8\uc801\uc73c\ub85c \uc7a5\uba74\uc774 \ub80c\ub354\ub9c1 \ub418\uae30 \uc9c1\uc804\uc5d0 \uc790\ub3d9\uc73c\ub85c \uc815\ud574\uc9c4 \uc0c9\uc0c1\uc73c\ub85c \ud504\ub808\uc784\ubc84\ud37c\uac00 \uc124\uc815\ub41c\ub2e4. \uc704\uc758 \ucf54\ub4dc\ub294 \uc774\ucc98\ub7fc \uc790\ub3d9\uc73c\ub85c \uc774\ub904\uc9c0\ub294 \uac83\uc744 \ubc29\uc9c0\ud558\uace0\uc790 \ud568\uc774\ub2e4. \uc790, \uc774\uc81c \ub80c\ub354\ub9c1 \ucf54\ub4dc\ub97c \ubcf4\uc790.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nrender() {\r\n  this.update();\r\n\r\n  this._renderer.clearColor();\r\n  this._renderer.render(this._scene, this._camera2);\r\n  this._renderer.render(this._scene, this._camera1);\r\n\r\n  requestAnimationFrame(this.render.bind(this));\r\n}\r\n<\/pre>\n<p>Renderer\uc758 autoClearColor\ub97c false\ub85c \uc9c0\uc815\ud588\uc73c\ubbc0\ub85c \uc774\uc81c \uc9c1\uc811 \ud504\ub808\uc784\ubc84\ud37c\ub97c \uc9c0\uc6b0\uae30 \uc704\ud574 Renderer\uc758 clearColor \ub9e4\uc11c\ub4dc\ub97c \ud638\ucd9c\ud574\uc57c \ud55c\ub2e4. \uadf8\ub7f0 \ud6c4\uc5d0 \uac01 \uce74\uba54\ub77c\ub97c \uc774\uc6a9\ud574 \uc7a5\uba74\uc744 \ub80c\ub354\ub9c1\ud55c\ub2e4. \ub05d\uc774\ub2e4.<\/p>\n<p>\uad73\ud788 \uc5b8\uae09\ud558\uc9c0 \uc54a\uc544\ub3c4 \uc774\ubbf8 \uc54c\uaca0\uc9c0\ub9cc \ucc3d \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \uce74\uba54\ub77c\uc758 \uae30\uc800 \uc778\uc790\uac12\ub4e4\uc744 \uc7ac\uc124\uc815\ud574\uc918\uc57c \ud55c\ub2e4. \uce74\uba54\ub77c\uac00 \uc5ec\ub7ec\uac1c\uc774\ubbc0\ub85c \uc774\uc5d0 \ub300\ud55c \ucf54\ub4dc\uae4c\uc9c0 \uc0b4\ud3b4\ubcf4\uace0 \ub9c8\ubb34\ub9ac \ud55c\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nresize() {\r\n  ...\r\n\r\n  const aspect = width \/ height;\r\n\r\n  this._camera1.aspect = aspect;\r\n  this._camera1.updateProjectionMatrix();\r\n\r\n  this._camera2.aspect = aspect;\r\n  this._camera2.updateProjectionMatrix();\r\n\r\n  ...\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ub7ec \uac1c\uc758 \uce74\uba54\ub77c\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \ud558\ub098\uc758 \uc7a5\uba74\uc5d0 \ud45c\uc2dc\ud574\uc57c\ud560 \ud544\uc694\uac00 \uc0dd\uae34\ub2e4. \uc608\ub97c\ub4e4\uc5b4 \uc2a4\ud0c0\ud06c\ub798\ud504\ud2b8 \uac8c\uc784\uc744 \ubcf4\uba74 \ud654\uba74\uc5d0 2\uac1c\uc758 \uc694\uc18c\ub85c \uad6c\ubd84\ub418\uc5b4 \uc788\ub2e4. \uccab\uc9f8\ub294 \ubbf8\ub2c8\ub9f5\uacfc \uba85\ub839 \uc544\uc774\ucf58\ub4e4\uc774 \ud45c\uc2dc\ub418\ub294 \ucee4\uba58\ud2b8 \uc694\uc18c\uc640 \ub450\ubc88\uc9f8\ub294 \uc2e4\uc81c \uac8c\uc784 \ud50c\ub808\uc774 \uc694\uc18c\uc774\ub2e4. \uc774\ub97c \uad6c\ud604\ud558\ub294 \ubc29\uc2dd\uc740 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uaca0\uc73c\ub098 \uba40\ud2f0 \uce74\uba54\ub77c\ub97c \uc774\uc6a9\ud558\ub294 \ubc29\uc2dd\uc774 \uc788\ub2e4. \uac8c\uc784 \ud50c\ub808\uc774 \uc694\uc18c\ub294 \uc6d0\uadfc\uac10 \uc788\uac8c PerspectiveCamera\ub97c \uc774\uc6a9\ud558\uace0 \ucee4\uba58\ub4dc \uc694\uc18c\ub294 OrthographicCamera\ub85c \uc6d0\uadfc\uac10 \uc5c6\uc774 \ub80c\ub354\ub9c1\ud558\ub294 \uac83\uc774\ub2e4. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15898\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;\uba40\ud2f0 \uce74\uba54\ub77c\uc758 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \ud558\ub098\uc758 Scene\uc5d0 \ud45c\uc2dc (in Three.js)&#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],"tags":[],"class_list":["post-15898","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\/15898","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=15898"}],"version-history":[{"count":3,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15898\/revisions"}],"predecessor-version":[{"id":15901,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15898\/revisions\/15901"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15898"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}