{"id":15547,"date":"2025-01-03T11:45:22","date_gmt":"2025-01-03T02:45:22","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=15547"},"modified":"2025-01-04T21:37:37","modified_gmt":"2025-01-04T12:37:37","slug":"%ec%84%a0%ed%83%9d%eb%90%9c-3d-%eb%aa%a8%eb%8d%b8%ec%97%90-%eb%8c%80%ed%95%9c-%ed%95%98%ec%9d%bc%eb%9d%bc%ec%9d%b4%ed%8c%85","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=15547","title":{"rendered":"three.js, \uc120\ud0dd\ub41c 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud558\uc774\ub77c\uc774\ud305"},"content":{"rendered":"<p>3D \uadf8\ub798\ud53d\uacfc \uad00\ub828\ub41c \uac1c\ubc1c\uc744 \ud558\ub2e4\ubcf4\uba74 \uc0ac\uc6a9\uc790 \uc694\uad6c \uc0ac\ud56d\uc5d0 \ub300\ud55c \uae30\ubcf8\uc801\uc778 \uac83\ub4e4\uc774 \uba87\uac00\uc9c0 \uc874\uc7ac\ud569\ub2c8\ub2e4. \uadf8\uc911\uc5d0 \ud558\ub098\uac00 \ub9c8\uc6b0\uc2a4 \ub4f1\uc73c\ub85c \uc5b4\ub5a4 \ubaa8\ub378\uc744 \ud074\ub9ad\ud574 \uc120\ud0dd\ud588\uc744\ub54c \uc120\ud0dd\ub41c \ubaa8\ub378\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud558\uc77c\ub77c\uc774\ud305\ub418\ub3c4\ub85d \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub9e4\uc6b0 \uba85\ud655\ud558\uace0 \ubc18\ub4dc\uc2dc \ud544\uc694\ud55c \uc694\uad6c\uc0ac\ud56d\uc785\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9c8\uc6b0\uc2a4\ub85c \ubaa8\ub378\uc758 \ud2b9\uc815 \ubd80\ubd84\uc744 \uc120\ud0dd\ud558\uba74 \uc120\ud0dd\ub41c \ubd80\ubd84\uc5d0 \ub300\ud55c \ud558\uc77c\ub77c\uc774\ud305\uc785\ub2c8\ub2e4.<\/p>\n<p><center><video controls=\"controls\" width=\"100%\" autoplay><source src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2025\/01\/selection2.mp4\" \/>\ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4.<\/video><\/center><\/p>\n<p>\uc774\ub7f0 \uc694\uad6c\uc0ac\ud56d\uc744 \ube60\ub974\uace0 \uc27d\uac8c \ubc18\uc601\ub420 \uc218 \uc788\ub3c4\ub85d SelectionPassWrapper\ub77c\ub294 \uc774\ub984\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4e4\uc5b4 \ubcf4\uc558\ub294\ub370\uc694. \uc774\ub984\uc5d0\uc11c\ub3c4 \uc54c \uc218 \uc788\ub294\ub4ef\uc774 Postprocess\ub97c \uc704\ud55c Pass\ub85c \ub9cc\ub4e4\uc5b4\uc84c\ub2e4\ub294 \uac83\uc744 \uc54c \uc218 \uc788\uc2b5\ub2c8\ub2e4. SelectionPassWrapper\ub97c \uc774\uc6a9\ud558\ub294 API\ub97c \uc815\ub9ac\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uba3c\uc800 SelectionPassWrapper\ub97c \uc0dd\uc131\ud574 Postprocess\ub97c \uc704\ud55c EffectComposer\uc5d0 \ucd94\uac00\ud558\ub294 \uac83\uc73c\ub85c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n_setupPostprocess() {\r\n  ...\r\n\r\n  const selectionPassWrapper = new SelectionPassWrapper(this._renderer, this._scene, this._camera);\r\n  \/\/ selectionPassWrapper.debug = false;\r\n  const selectionPass = selectionPassWrapper.pass;\r\n  effectComposer.addPass(selectionPass);\r\n  this._selectionPassWrapper = selectionPassWrapper;\r\n\r\n  ...\r\n}\r\n<\/pre>\n<p>\uadf8\ub9ac\uace0 \ub80c\ub354\ub9c1 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uc5c8\uc744 \ub54c \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nresize() {\r\n  ...\r\n\r\n  this._selectionPassWrapper.updateSize();\r\n}\r\n<\/pre>\n<p>\ub9c8\uc9c0\ub9c9\uc73c\ub85c \ud558\uc77c\ub77c\uc774\ud305\ud558\uace0\uc790 \ud558\ub294 \ub9e4\uc2dc\ub97c \uc9c0\uc815\ud574\uc57c \ud558\ub294\ub370\uc694. \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ud558\uc77c\ub77c\uc774\ud305 \ud558\uace0\uc790 \ud558\ub294 \uba54\uc2dc\ub97c \ub9c8\uc6b0\uc2a4\ub85c \ub354\ube14\ud074\ub9ad\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc120\ud0dd\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n_setupEvents() {\r\n  ...\r\n\r\n  const raycaster = new THREE.Raycaster();\r\n  const mouse = new THREE.Vector2();\r\n\r\n  window.addEventListener(\"dblclick\", (event) => {\r\n    mouse.x = (event.clientX \/ this._divContainer.clientWidth) * 2 - 1;\r\n    mouse.y = -(event.clientY \/ this._divContainer.clientHeight) * 2 + 1;\r\n\r\n    raycaster.setFromCamera(mouse, this._camera);\r\n    const intersects = raycaster.intersectObjects(this._scene.children, true);\r\n\r\n    if (intersects.length > 0) {\r\n      this._selectionPassWrapper.selectedMeshes.length = 0;\r\n\r\n      const intersectedMesh = intersects[0].object;\r\n      if(intersectedMesh.parent.type === \"Group\") {\r\n        intersectedMesh.parent.traverse(child => {\r\n          if(child.isMesh) {\r\n            this._selectionPassWrapper.selectedMeshes.push(child);\r\n          }\r\n        });\r\n      } else {\r\n        this._selectionPassWrapper.selectedMeshes.push(intersectedMesh);\r\n      }\r\n    } else {\r\n      this._selectionPassWrapper.selectedMeshes.length = 0;\r\n    }\r\n\r\n    this._selectionPassWrapper.updateSelection();\r\n  });\r\n}\r\n<\/pre>\n<p>\ub9cc\uc57d OrbitControls\uc758 autoRotate\ub098 enableDamping\uac00 \ud65c\uc131\ud654\ub41c \uacbd\uc6b0 \ub2e4\uc74c \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\n_setupControls() {\r\n  this._orbitControls = new OrbitControls(this._camera, this._divContainer);\r\n  this._orbitControls.addEventListener(\"change\", () => {\r\n    this._selectionPassWrapper.updateSelection();\r\n  });\r\n  this._orbitControls.autoRotate = true;\r\n  this._orbitControls.enableDamping = true;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>3D \uadf8\ub798\ud53d\uacfc \uad00\ub828\ub41c \uac1c\ubc1c\uc744 \ud558\ub2e4\ubcf4\uba74 \uc0ac\uc6a9\uc790 \uc694\uad6c \uc0ac\ud56d\uc5d0 \ub300\ud55c \uae30\ubcf8\uc801\uc778 \uac83\ub4e4\uc774 \uba87\uac00\uc9c0 \uc874\uc7ac\ud569\ub2c8\ub2e4. \uadf8\uc911\uc5d0 \ud558\ub098\uac00 \ub9c8\uc6b0\uc2a4 \ub4f1\uc73c\ub85c \uc5b4\ub5a4 \ubaa8\ub378\uc744 \ud074\ub9ad\ud574 \uc120\ud0dd\ud588\uc744\ub54c \uc120\ud0dd\ub41c \ubaa8\ub378\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud558\uc77c\ub77c\uc774\ud305\ub418\ub3c4\ub85d \ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \ub9e4\uc6b0 \uba85\ud655\ud558\uace0 \ubc18\ub4dc\uc2dc \ud544\uc694\ud55c \uc694\uad6c\uc0ac\ud56d\uc785\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9c8\uc6b0\uc2a4\ub85c \ubaa8\ub378\uc758 \ud2b9\uc815 \ubd80\ubd84\uc744 \uc120\ud0dd\ud558\uba74 \uc120\ud0dd\ub41c \ubd80\ubd84\uc5d0 \ub300\ud55c \ud558\uc77c\ub77c\uc774\ud305\uc785\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc774\ub7f0 \uc694\uad6c\uc0ac\ud56d\uc744 \ube60\ub974\uace0 \uc27d\uac8c \ubc18\uc601\ub420 \uc218 \uc788\ub3c4\ub85d SelectionPassWrapper\ub77c\ub294 \uc774\ub984\uc73c\ub85c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=15547\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;three.js, \uc120\ud0dd\ub41c 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud558\uc774\ub77c\uc774\ud305&#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,139,1],"tags":[],"class_list":["post-15547","post","type-post","status-publish","format-standard","hentry","category-three-js","category-webgl","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15547","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=15547"}],"version-history":[{"count":15,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15547\/revisions"}],"predecessor-version":[{"id":15575,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15547\/revisions\/15575"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15547"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}