3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c \uc801\uc6a9\ud558\uae30 \uc704\ud574 SmartLabel\uc774\ub77c\ub294 \uc774\ub984\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4e4\uc5c8\ub294\ub370\uc694. \uc774 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc801\uc6a9\ud560 \ub54c \uace0\ub824\ud574\uc57c\ud560 \ucf54\ub4dc\ub97c \uc815\ub9ac\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 SmartLabel \ucef4\ud3ec\ub10c\ud2b8\uc640 \ub77c\ubca8 \uad00\ub828 \ub370\uc774\ud130\ub97c \uc0dd\uc131\ud558\uace0 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\r\n _setupLabels() {\r\n const smartLabel = new SmartLabel(this._scene, this._camera);\r\n this._smartLabel = smartLabel;\r\n\r\n const labels = {\r\n \"Object\": {\r\n label: \"\ubbf8\ud560\ub2f9\uc601\uc5ed\",\r\n textColor: \"gray\",\r\n },\r\n \"Part1\": {\r\n label: \"\uc815\ubb38 \uacc4\ub2e8\",\r\n textColor: \"white\",\r\n },\r\n \"Part2\": {\r\n label: \"\uc815\ubb38\",\r\n textColor: \"white\",\r\n },\r\n \"Part3\": {\r\n label: \"\ud30c\uc190\uc601\uc5edA\",\r\n textColor: \"red\",\r\n },\r\n \"Part4\": {\r\n label: \"\ud30c\uc190\uc601\uc5edB\",\r\n textColor: \"red\",\r\n },\r\n \r\n ...\r\n }\r\n\r\n this._smartLabel.setLabelData(labels);\r\n }\r\n<\/pre>\nlabels \uac1d\uccb4\uc758 key\ub294 Mesh\uc758 \uc774\ub984\uc774\uace0 Value\ub294 \ud45c\uc2dc\ub420 \ub77c\ubca8\uacfc \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1\uc785\ub2c8\ub2e4. \ub77c\ubca8\uc774 \ud45c\uc2dc\ub420 Mesh\uc758 \uc9c0\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n_setupModel() {\r\n const loader = new GLTFLoader();\r\n loader.load(\".\/model.glb\", gltf => {\r\n const object = gltf.scene;\r\n this._scene.add(object);\r\n const meshes = [];\r\n\r\n object.traverse(obj => {\r\n if (obj.isMesh) meshes.push(obj);\r\n });\r\n\r\n this._smartLabel.setTargetMeshs(meshes);\r\n this._smartLabel.buildLabels();\r\n\r\n ...\r\n });\r\n}\r\n<\/pre>\n\ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nupdate() {\r\n ...\r\n\r\n this._smartLabel.updateOnFrame();\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \uc2dc \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud558\uad6c\uc694.<\/p>\n\r\nrender() {\r\n this.update();\r\n\r\n ...\r\n\r\n this._smartLabel.render();\r\n\r\n requestAnimationFrame(this.render.bind(this));\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \ub418\ub294 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ... \r\n\r\n this._smartLabel.updateSize(width, height);\r\n}\r\n<\/pre>\n\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
labels \uac1d\uccb4\uc758 key\ub294 Mesh\uc758 \uc774\ub984\uc774\uace0 Value\ub294 \ud45c\uc2dc\ub420 \ub77c\ubca8\uacfc \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1\uc785\ub2c8\ub2e4. \ub77c\ubca8\uc774 \ud45c\uc2dc\ub420 Mesh\uc758 \uc9c0\uc815\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n_setupModel() {\r\n const loader = new GLTFLoader();\r\n loader.load(\".\/model.glb\", gltf => {\r\n const object = gltf.scene;\r\n this._scene.add(object);\r\n const meshes = [];\r\n\r\n object.traverse(obj => {\r\n if (obj.isMesh) meshes.push(obj);\r\n });\r\n\r\n this._smartLabel.setTargetMeshs(meshes);\r\n this._smartLabel.buildLabels();\r\n\r\n ...\r\n });\r\n}\r\n<\/pre>\n\ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nupdate() {\r\n ...\r\n\r\n this._smartLabel.updateOnFrame();\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \uc2dc \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud558\uad6c\uc694.<\/p>\n\r\nrender() {\r\n this.update();\r\n\r\n ...\r\n\r\n this._smartLabel.render();\r\n\r\n requestAnimationFrame(this.render.bind(this));\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \ub418\ub294 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ... \r\n\r\n this._smartLabel.updateSize(width, height);\r\n}\r\n<\/pre>\n\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ub9e4 \ud504\ub808\uc784\ub9c8\ub2e4 \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\r\nupdate() {\r\n ...\r\n\r\n this._smartLabel.updateOnFrame();\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \uc2dc \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud558\uad6c\uc694.<\/p>\n\r\nrender() {\r\n this.update();\r\n\r\n ...\r\n\r\n this._smartLabel.render();\r\n\r\n requestAnimationFrame(this.render.bind(this));\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \ub418\ub294 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ... \r\n\r\n this._smartLabel.updateSize(width, height);\r\n}\r\n<\/pre>\n\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ub80c\ub354\ub9c1 \uc2dc \ub2e4\uc74c\uacfc \uac19\uc740 \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud558\uad6c\uc694.<\/p>\n
\r\nrender() {\r\n this.update();\r\n\r\n ...\r\n\r\n this._smartLabel.render();\r\n\r\n requestAnimationFrame(this.render.bind(this));\r\n}\r\n<\/pre>\n\ub80c\ub354\ub9c1 \ub418\ub294 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ... \r\n\r\n this._smartLabel.updateSize(width, height);\r\n}\r\n<\/pre>\n\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ub80c\ub354\ub9c1 \ub418\ub294 \uc601\uc5ed\uc758 \ud06c\uae30\uac00 \ubcc0\uacbd\ub418\uba74 \ub2e4\uc74c \ucf54\ub4dc \ud638\ucd9c\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\r\nresize() {\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n\r\n ... \r\n\r\n this._smartLabel.updateSize(width, height);\r\n}\r\n<\/pre>\n\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ub77c\ubca8\uc740 DOM \uc694\uc18c\uc785\ub2c8\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc2a4\ud0c0\uc77c\uc774 \ud544\uc694\ud560 \uc218 \uc788\ub294\ub370, \uc704\uc758 \uc608\uc2dc\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n.label {\r\n font-size: 1em;\r\n border: 2px solid yellow;\r\n padding: 0.3em 0.8em;\r\n border-radius: 0.9em;\r\n\r\n background-color: black;\r\n transition: transform 0.2s ease-out, opacity 1s ease;\r\n box-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ud6a8\uacfc\uc801\uc740 \ub77c\ubca8 \uc2dc\uac01\ud654\ub294 \uadf8 \ubaa9\u001d\ud45c\uc5d0 \ub530\ub77c \ub9e4\uc6b0 \uc8fc\uad00\uc801\uc774\uace0 \ub2e4\uc591\ud558\uac8c \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c \uc81c\uacf5\ub418\ub294 \ub77c\ubca8 \uc2dc\uac01\ud654 \uc5ed\uc2dc \ub9ce\uc740 \ub2e4\uc591\ud55c \ubc29\ubc95 \uc911\uc5d0 \ud558\ub098\uc778\ub370\uc694. \ubaa9\ud45c\ub294 3D \ubaa8\ub378\uc744 \ucd5c\ub300\ud55c \uac00\ub9ac\uc9c0 \uc54a\uc544\uc57c \ud558\uba70 \ub77c\ubca8 \uc0ac\uc774\uc758 \ucda9\ub3cc\uc744 \ucd5c\uc18c\ud654 \ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub7f0 \ubaa9\ud45c\uc5d0 \ub530\ub77c \ub9cc\ub4e0 \uae30\ub2a5\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uc704\uc758 \uae30\ub2a5\uc744 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ube60\ub974\uace0 \uc27d\uac8c … <\/p>\n
\ub354 \ubcf4\uae30 “three.js, 3D \ubaa8\ub378\uc5d0 \ub300\ud55c \ub77c\ubca8 \uc2dc\uac01\ud654”<\/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-15560","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\/15560","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=15560"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions"}],"predecessor-version":[{"id":15571,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/15560\/revisions\/15571"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15560"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}