1"use strict";(self.webpackChunkrealsee_developer_github_com=self.webpackChunkrealsee_developer_github_com||[]).push([[7785],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>g});var a=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,a,o=function(e,t){if(null==e)return{};var n,a,o={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var s=a.createContext({}),c=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},p=function(e){var t=c(e.components);return a.createElement(s.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),d=c(n),u=o,g=d["".concat(s,".").concat(u)]||d[u]||m[u]||r;return n?a.createElement(g,l(l({ref:t},p),{},{components:n})):a.createElement(g,l({ref:t},p))}));function g(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=n.length,l=new Array(r);l[0]=u;var i={};for(var s in t)hasOwnProperty.call(t,s)&&(i[s]=t[s]);i.originalType=e,i[d]="string"==typeof e?e:o,l[1]=i;for(var c=2;c<r;c++)l[c]=n[c];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},85162:(e,t,n)=>{n.d(t,{Z:()=>l});var a=n(67294),o=n(86010);const r={tabItem:"tabItem_Ymn6"};function l(e){let{children:t,hidden:n,className:l}=e;return a.createElement("div",{role:"tabpanel",className:(0,o.Z)(r.tabItem,l),hidden:n},t)}},65488:(e,t,n)=>{n.d(t,{Z:()=>m});var a=n(87462),o=n(67294),r=n(86010),l=n(72389),i=n(67392),s=n(7094),c=n(12466);const p={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function d(e){const{lazy:t,block:n,defaultValue:l,values:d,groupId:m,className:u}=e,g=o.Children.map(e.children,(e=>{if((0,o.isValidElement)(e)&&"value"in e.props)return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)})),f=d??g.map((e=>{let{props:{value:t,label:n,attributes:a}}=e;return{value:t,label:n,attributes:a}})),b=(0,i.l)(f,((e,t)=>e.value===t.value));if(b.length>0)throw new Error(`Docusaurus error: Duplicate values "${b.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`);const v=null===l?l:l??g.find((e=>e.props.default))?.props.value??g[0].props.value;if(null!==v&&!f.some((e=>e.value===v)))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${v}" but none of its children has the corresponding value. Available values are: ${f.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);const{tabGroupChoices:h,setTabGroupChoices:k}=(0,s.U)(),[y,w]=(0,o.useState)(v),T=[],{blockElementScrollPositionUntilNextRender:x}=(0,c.o5)();if(null!=m){const e=h[m];null!=e&&e!==y&&f.some((t=>t.value===e))&&w(e)}const N=e=>{const t=e.currentTarget,n=T.indexOf(t),a=f[n].value;a!==y&&(x(t),w(a),null!=m&&k(m,String(a)))},j=e=>{let t=null;switch(e.key){case"Enter":N(e);break;case"ArrowRight":{const n=T.indexOf(e.currentTarget)+1;t=T[n]??T[0];break}case"ArrowLeft":{const n=T.indexOf(e.currentTarget)-1;t=T[n]??T[T.length-1];break}}t?.focus()};return o.createElement("div",{className:(0,r.Z)("tabs-container",p.tabList)},o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":n},u)},f.map((e=>{let{value:t,label:n,attributes:l}=e;return o.createElement("li",(0,a.Z)({role:"tab",tabIndex:y===t?0:-1,"aria-selected":y===t,key:t,ref:e=>T.push(e),onKeyDown:j,onClick:N},l,{className:(0,r.Z)("tabs__item",p.tabItem,l?.className,{"tabs__item--active":y===t})}),n??t)}))),t?(0,o.cloneElement)(g.filter((e=>e.props.value===y))[0],{className:"margin-top--md"}):o.createElement("div",{className:"margin-top--md"},g.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==y})))))}function m(e){const t=(0,l.Z)();return o.createElement(d,(0,a.Z)({key:String(t)},e))}},89971:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>g,frontMatter:()=>i,metadata:()=>c,toc:()=>d});var a=n(87462),o=(n(67294),n(3905)),r=n(65488),l=n(85162);const i={title:"\u6253\u6807\u7b7e"},s=void 0,c={unversionedId:"front/3d-space/handbook/no-framework/tagging",id:"front/3d-space/handbook/no-framework/tagging",title:"\u6253\u6807\u7b7e",description:"\u4e0a\u4e00\u7ae0\u56de\u987e: \u4e09\u7ef4\u4e2d\u7684\u70b9",source:"@site/docs/front/3d-space/handbook/no-framework/5.tagging.md",sourceDirName:"front/3d-space/handbook/no-framework",slug:"/front/3d-space/handbook/no-framework/tagging",permalink:"/docs/front/3d-space/handbook/no-framework/tagging",draft:!1,tags:[],version:"current",lastUpdatedBy:"sansi.lcj",lastUpdatedAt:1669717185,formattedLastUpdatedAt:"2022\u5e7411\u670829\u65e5",sidebarPosition:5,frontMatter:{title:"\u6253\u6807\u7b7e"},sidebar:"\u4e09\u7ef4\u7a7a\u95f4",previous:{title:"\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u7684\u70b9",permalink:"/docs/front/3d-space/handbook/no-framework/points-in-3d"},next:{title:"\u8d77\u6b65",permalink:"/docs/front/3d-space/handbook/react-hoc/get-started"}},p={},d=[{value:"\u51c6\u5907\u5de5\u4f5c",id:"\u51c6\u5907\u5de5\u4f5c",level:2},{value:"\u5f00\u53d1\u6253\u6807\u7b7e\u529f\u80fd",id:"\u5f00\u53d1\u6253\u6807\u7b7e\u529f\u80fd",level:2},{value:"\u6dfb\u52a0\u6807\u7b7e\u6837\u5f0f",id:"\u6dfb\u52a0\u6807\u7b7e\u6837\u5f0f",level:3},{value:"project2d \u8bf4\u660e",id:"project2d-\u8bf4\u660e",level:3},{value:"\u7f16\u5199\u903b\u8f91\u4ee3\u7801",id:"\u7f16\u5199\u903b\u8f91\u4ee3\u7801",level:3}],m={toc:d},u="wrapper";
1function g(e){let{components:t,...n}=e;return(0,o.kt)(u,(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},(0,o.kt)("strong",{parentName:"p"},"\u4e0a\u4e00\u7ae0\u56de\u987e: \u4e09\u7ef4\u4e2d\u7684\u70b9")," ",(0,o.kt)("br",null),"\n\u4f60\u4e86\u89e3 Five SDK \u7684\u4e8b\u4ef6\u7cfb\u7edf\uff0c\u5e76\u4e14\u5c1d\u8bd5\u5f00\u53d1\u4e86\u5c0f\u5e94\u7528\uff0c\u901a\u8fc7\u70b9\u51fb\u4e8b\u4ef6\u83b7\u53d6\u5230\u70b9\u7684\u4e09\u7ef4\u4f4d\u7f6e\u3002")),(0,o.kt)("admonition",{title:"\u672c\u7ae0\u4f60\u53ef\u4ee5\u5b66\u4e60\u5230",type:"tip"},(0,o.kt)("p",{parentName:"admonition"}," \u5728\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u8bbe\u7f6e\u6807\u7b7e\u3002")),(0,o.kt)("h2",{id:"\u51c6\u5907\u5de5\u4f5c"},"\u51c6\u5907\u5de5\u4f5c"),(0,o.kt)("p",null,"\u6211\u4eec\u65b0\u5efa\u4e00\u4e2a\u76ee\u5f55\uff08",(0,o.kt)("inlineCode",{parentName:"p"},"src/5.tagging"),"\uff09\u4ee5\u53ca\u5bf9\u5e94\u7684 ",(0,o.kt)("strong",{parentName:"p"},"html")," \u6587\u4ef6 \u4ee5\u53ca ",(0,o.kt)("strong",{parentName:"p"},"js")," \u6216 ",(0,o.kt)("strong",{parentName:"p"},"ts")," \u6587\u4ef6\u3002\n\u643a\u5e26\u7740\u4e0a\u4e00\u7ae0\u7684 ",(0,o.kt)("strong",{parentName:"p"},"State")," \u4ee3\u7801\uff0c\u592a\u8fc7\u4e8e\u7e41\u7410\uff0c\u90a3\u6211\u4eec\u4ece ",(0,o.kt)("strong",{parentName:"p"},"\u5c55\u793a\u4e09\u7ef4\u7a7a\u95f4")," \u7ae0\u7684\u5185\u5bb9\u7684\u57fa\u7840\u5f00\u53d1\u3002"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="src/5.tagging/index.html"',title:'"src/5.tagging/index.html"'},'<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <link rel="icon" href="data:;base64,iVBORw0KGgo=">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>\u4e09\u7ef4\u4e2d\u7684\u70b9 | Points in 3d</title>\n <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">\n <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">\n <style>\n html, body, #app { width: 100%; height: 100%; overflow: hidden; }\n </style>\n</head>\n<body>\n <div id="app"></div>\n \x3c!-- \u6a21\u5f0f\u5207\u6362 --\x3e\n <nav class="navbar fixed-bottom navbar-light bg-light">\n <div class="container-fluid justify-content-center">\n <div class="btn-group">\n <button class="btn btn-primary active js-Panorama">\u5168\u666f\u6f2b\u6e38</button>\n <button class="btn btn-primary js-Floorplan">\u7a7a\u95f4\u603b\u89c8</button>\n </div>\n </div>\n </nav>\n <script type="module" src="./index"><\/script>\n</body>\n</html>\n')),(0,o.kt)(r.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"JavaScript",label:"JavaScript",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="src/5.tagging/index.js"',title:'"src/5.tagging/index.js"'},'import { Five, parseWork } from "@realsee/five";\n\nconst workURL = "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";\n\nconst five = new Five();\n\nfive.appendTo(document.querySelector("#app"));\n\nfetch(workURL).then(res => res.json()).then((json) => {\n const work = parseWork(json);\n five.load(work);\n});\n\nwindow.addEventListener("resize", () => five.refresh(), false);\n\n{// === \u6a21\u5f0f\u5207\u6362 ===\n const buttons = {\n "Panorama": document.querySelector(".js-Panorama"),\n "Floorplan": document.querySelector(".js-Floorplan")\n };\n\n for (const [modeName, element] of Object.entries(buttons)) {\n element.addEventListener("click", () => {\n five.setState({ mode: modeName });\n }, false);\n }\n\n five.on("stateChange", state => {\n for (const [modeName, element] of Object.entries(buttons)) {\n if (modeName === state.mode) {\n element.classList.add("active");\n } else {\n element.classList.remove("active");\n }\n };\n });\n}\n\nexport {};\n'))),(0,o.kt)(l.Z,{value:"TypeScript",label:"TypeScript",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts",metastring:'title="src/5.tagging/index.ts"',title:'"src/5.tagging/index.ts"'},'import { Five, Mode, parseWork } from "@realsee/five";\n\nconst workURL = "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/wor
1k.json";\n\nconst five = new Five();\n\nfive.appendTo(document.querySelector("#app")!);\n\nfetch(workURL).then(res => res.json()).then((json) => {\n const work = parseWork(json);\n five.load(work);\n});\n\nwindow.addEventListener("resize", () => five.refresh(), false);\n\n{// === \u6a21\u5f0f\u5207\u6362 ===\n const buttons: Partial<Record<Mode, Element>> = {\n "Panorama": document.querySelector(".js-Panorama")!,\n "Floorplan": document.querySelector(".js-Floorplan")!\n };\n\n for (const [modeName, element] of Object.entries(buttons)) {\n element.addEventListener("click", () => {\n five.setState({ mode: modeName as Mode });\n }, false);\n }\n\n five.on("stateChange", state => {\n for (const [modeName, element] of Object.entries(buttons)) {\n if (modeName === state.mode) {\n element.classList.add("active");\n } else {\n element.classList.remove("active");\n }\n };\n });\n}\n\nexport {};\n')))),(0,o.kt)("p",null,"\u542f\u52a8\u670d\u52a1 ",(0,o.kt)("inlineCode",{parentName:"p"},"npm run dev"),'\u3002 \u5e76\u8df3\u8f6c\u5230\u5f53\u524d\u9875\u9762 "http://localhost:3000/src/5.tagging/index.html"\u3002'),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"}
1,"\u8bf7\u67e5\u770b\u4f60\u7684\u63a7\u5236\u53f0\uff0c\u7aef\u53e3\u53f7\u4f1a\u56e0\u4e3a\u4f60\u7684\u914d\u7f6e\u4ee5\u53ca\u5f53\u524d\u7aef\u53e3\u5360\u7528\u60c5\u51b5\u53d8\u66f4\uff0c\u8bf7\u5df2\u63a7\u5236\u53f0\u8f93\u51fa\u7684\u4e3a\u51c6\u3002\n\u5982\u679c\u4f60\u4f7f\u7528\u5176\u4ed6\u5f00\u53d1\u6784\u5efa\u5de5\u5177\uff0c\u8bf7\u6309\u7167\u81ea\u5df1\u7684\u5f00\u53d1\u6784\u5efa\u5de5\u5177\u7684\u8981\u6c42\u542f\u52a8\u670d\u52a1\u3002")),(0,o.kt)("h2",{id:"\u5f00\u53d1\u6253\u6807\u7b7e\u529f\u80fd"},"\u5f00\u53d1\u6253\u6807\u7b7e\u529f\u80fd"),(0,o.kt)("h3",{id:"\u6dfb\u52a0\u6807\u7b7e\u6837\u5f0f"},"\u6dfb\u52a0\u6807\u7b7e\u6837\u5f0f"),(0,o.kt)("p",null,"\u5728 ",(0,o.kt)("strong",{parentName:"p"},"html")," \u6587\u4ef6\u4e2d\u6dfb\u52a0\u6807\u7b7e\u6837\u5f0f\u3002"),(0,o.kt)("blockquote",null,(0,o.kt)("p",{parentName:"blockquote"},"\u6837\u5f0f\u5e76\u975e\u662f\u5fc5\u987b\u7684\uff0c\u53ea\u662f\u4e3a\u4e86\u6807\u7b7e\u597d\u770b\u4e00\u4e9b\u3002")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="src/5.tagging/index.html"',title:'"src/5.tagging/index.html"'},'<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <link rel="icon" href="data:;base64,iVBORw0KGgo=">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>\u5c55\u793a\u7a7a\u95f4 | Displaying work</title>\n <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">\n <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">\n <style>\n html, body, #app { width: 100%; height: 100%; overflow: hidden; }\n /* highlight-start */\n /* \u6253\u6807\u7b7e */\n .tag { position: absolute; width: 0; height: 0; transform: translateZ(0); }\n .tag-pannel { position: absolute; width: 100px; min-height: 20px; transform: translate(-50%, 0); left: 50%; bottom: 10px; background: #333; color: #fff; border-radius: 2px; text-align: center; line-height: 20px; padding: 8px; font-size: 14px;}\n .tag-pannel:after { content: ""; display: block; position: absolute; width: 10px; height: 10px; left: 50%; bottom: -5px; transform: translate(-50%, 0) rotate(45deg); background: #333; pointer-events: none; }\n /* highlight-end */\n </style>\n</head>\n<body>\n <div id="app"></div>\n \x3c!-- \u6a21\u5f0f\u5207\u6362 --\x3e\n <nav class="navbar fixed-bottom navbar-light bg-light">\n <div class="container-fluid justify-content-center">\n <div class="btn-group">\n <button class="btn btn-primary active js-Panorama">\u5168\u666f\u6f2b\u6e38</button>\n <button class="btn btn-primary js-Floorplan">\u7a7a\u95f4\u603b\u89c8</button>\n </div>\n </div>\n </nav>\n \x3c!-- highlight-start --\x3e\n \x3c!-- \u6253\u6807\u7b7e --\x3e\n <div class="card position-fixed m-2 top-0 start-0">\n <button class="btn btn-primary js-add-tag">\u6253\u6807\u7b7e</button>\n </div>\n \x3c!-- highlight-end --\x3e\n <script type="module" src="./index"><\/script>\n</body>\n</html>\n')),(0,o.kt)("h3",{id:"project2d-\u8bf4\u660e"},"project2d \u8bf4\u660e"),(0,o.kt)("p",null,"\u672c\u7ae0\u4f1a\u4f7f\u7528\u5230 ",(0,o.kt)("a",{parentName:"p",href:"https://unpkg.com/@realsee/five/docs/classes/five.Five.html#project2d"},(0,o.kt)("inlineCode",{parentName:"a"},"project2d"))," \u65b9\u6cd5\u3002\u4ed6\u53ef\u4ee5\u5c06\u4e09\u7ef4\u7684\u5750\u6807\u5bf9\u5e94\u5230\u800c\u4e3a\u5c4f\u5e55\u3002"),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"five.project2d(vector: THREE.Vector3, testModel: boolean): THREE.Vector2 | null")),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},"\u5c06\u4e00\u4e2a\u4e09\u7ef4\u5750\u6807\u4f20\u5165\u53ef\u4ee5\u5f97\u5230\u4e00\u4e2a\u5c4f\u5e55\u4e8c\u7ef4\u5750\u6807, \u539f\u70b9\u5728\u5de6\u4e0a, \u5355\u4f4d\u4e3a\u50cf\u7d20\u3002\u53ef\u4ee5\u4f5c\u4e3a ",(0,o.kt)("inlineCode",{parentName:"li"},'{ left: returnValue.x + "px", top: returnValue.y + "px" }')," \u7b49\u65b9\u5f0f\u4f7f\u7528\u3002"),(0,o.kt)("li",{parentName:"ol"},"\u5982\u679c\u4e09\u7ef4\u5750\u6807\u65e0\u6cd5\u8ba1\u7b97\u5230\u5c4f\u5e55\u4e2d\uff08\u6bd4\u5982\u5728\u80cc\u540e\u6216\u8005\u88ab\u906e\u6321\uff09\uff0c\u5219\u8fd4\u56de ",(0,o.kt)("inlineCode",{parentName:"li"},"null"),"\u3002"),(0,o.kt)("li",{parentName:"ol"},"\u7b2c\u4e8c\u4e2a\u53c2\u6570 ",(0,o.kt)("strong",{parentName:"li"},"testModel")," \u4e3a\u662f\u5426\u8ba1\u7b97\u6a21\u578b\u78b0\u649e\uff0c\u5373\u88ab\u6a21\u578b\u906e\u6321\u7684\u5750\u6807\u662f\u5426\u4e3a ",(0,o.kt)("inlineCode",{parentName:"li"},"null"),"\u3002")),(0,o.kt)("h3",{id:"\u7f16\u5199\u903b\u8f91\u4ee3\u7801"},"\u7f16\u5199\u903b\u8f91\u4ee3\u7801"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("inlineCode",{parentName:"li"},"newTag")," \u4e3a\u65b0\u589e\u72b6\u6001\u4e0b\u7684\u6807\u7b7e\uff0c\u9700\u8981\u8ddf\u968f\u9f20\u6807\u4f4d\u7f6e\u9884\u5b9a\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("inlineCode",{parentName:"li"},"tags")," \u5df2\u7ecf\u56fa\u5b9a\u7684\u6807\u7b7e\uff0c\u8ddf\u968f\u955c\u5934\u79fb\u52a8\u3002"),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("inlineCode",{parentName:"li"},"tagToElement")," \u5b58\u50a8 tag \u5bf9\u5e94\u7684 DOM \u7ed3\u6784\u3002"),(0,o.kt)("li",{parentName:"ol"},"\u76f8\u673a\u79fb\u52a8\u89e6\u53d1 ",(0,o.kt)("inlineCode",{parentName:"li"},"cameraUpdate")," \u4e8b\u4ef6\uff0c\u5728\u56de\u8c03\u51fd\u6570\u4e2d\uff0c\u901a\u8fc7 \u6807\u7b7e\u8c03\u7528 ",(0,o.kt)("inlineCode",{parentName:"li"},"$five.project2d")," \u65b9\u6cd5\u83b7\u53d6\u5c4f\u5e55\u753b\u5e03\u5750\u6807\uff0c\u7136\u540e\u901a\u8fc7\u6539\u53d8\u6837\u5f0f\uff0c\u6e32\u67d3\u51fa\u6765\u3002")),(0,o.kt)("p",null,"\u5728 ",(0,o.kt)("strong",{parentName:"p"},"\u6a21\u5f0f\u5207\u6362")," \u7684\u4ee3\u7801\u540e\u8ffd\u52a0\uff1a"),(0,o.kt)(r.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"JavaScript",label:"JavaScript",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js",metastring:'title="src/5.tagging/index.js"',title:'"src/5.tagging/index.js"'},'{ // === \u6253\u6807\u7b7e ===\n const app = document.querySelector("#app");\n const addButton = document.querySelector(".js-add-tag");\n let newTag = null;\n let tags = [];\n const tagToElement = new WeakMap();\n\n const createTagElement = tag => {\n const div = document.createElement("div");\n div.className = "tag";\n div.style.display = "none";\n div.innerHTML = `<div class="tag-pannel"><span class="tag-content">${tag.label}</span></div>`;\n app.appendChild(div);\n return div;\n };\n\n const renderTags = () => {\n for (const tag of [newTag, ...tags]) {\n if (!tag) continue;\n if (!tag.position) continue;\n const element = tagToElement.get(tag);\n if (!element) continue;\n const position = five.project2d(tag.position, true);\n if (position === null) {\n element.style.display = "none";\n } else {\n element.style.display = "";\n element.style.left = position.x + "px";\n element.style.top = position.y + "px";\n }\n }\n };\n\n addButton.addEventListener("click", () => {\n newTag = { label: window.prompt("\u6dfb\u52a0\u6807\u7b7e", "") || "\u672a\u547d\u540d" };\n tagToElement.set(newTag, createTagElement(newTag));\n }, false);\n\n five.on("intersectionOnModelUpdate", intersect => {\n if (newTag) newTag.position = intersect.point;\n renderTags();\n });\n five.on("wantsTapGesture", () => {\n if (newTag && newTag.position) {\n tags.push(newTag);\n newTag = null;\n renderTags();\n return false;\n }\n });\n five.on("cameraUpdate", renderTags);\n}\n'))),(0,o.kt)(l.Z,{value:"TypeScript",label:"TypeScript",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts",metastring:'title="src/5.tagging/index.ts"',title:'"src/5.tagging/index.ts"'},'{ // === \u6253\u6807\u7b7e ===\n type Tag = { position?: THREE.Vector3, label: string };\n const app = document.querySelector("#app")!;\n const addButton = document.querySelector(".js-add-tag")!;\n let newTag: Tag | null = null;\n let tags: Tag[] = [];\n const tagToElement = new WeakMap<Tag, HTMLElement>();\n\n const createTagElement = (tag: Tag) => {\n const div = document.createElement("div");\n div.className = "tag";\n div.style.display = "none";\n div.innerHTML = `<div class="tag-pannel"><span class="tag-content">${tag.label}</span></div>`;\n app.appendChild(div);\n return div;\n };\n\n const renderTags = () => {\n for (const tag of [newTag, ...tags]) {\n if (!tag) continue;\n if (!tag.position) continue;\n const element = tagToElement.get(tag);\n if (!element) continue;\n const position = five.project2d(tag.position, true);\n if (position === null) {\n element.style.display = "none";\n } else {\n element.style.display = "";\n element.style.left = position.x + "px";\n element.style.top = position.y + "px";\n }\n }\n };\n\n addButton.addEventListener("click", () => {\n newTag = { label: window.prompt("\u6dfb\u52a0\u6807\u7b7e", "") || "\u672a\u547d\u540d" };\n tagToElement.set(newTag, createTagElement(newTag));\n }, false);\n\n five.on("intersectionOnModelUpdate", intersect => {\n if (newTag) newTag.position = intersect.point;\n renderTags();\n });\n five.on("wantsTapGesture", () => {\n if (newTag && newTag.position) {\n tags.push(newTag);\n newTag = null;\n renderTags();\n return false;\n }\n });\n five.on("cameraUpdate", renderTags);\n}\n')))),(0,o.kt)("p",null,"\u56de\u5230\u4f60\u7684\u6d4f\u89c8\u5668\u67e5\u7
170b\uff0c\u4f1a\u53d1\u73b0\u4f60\u7684\u9875\u9762\u5de6\u4e0a\u89d2\u51fa\u73b0\u6253\u6807\u7b7e\u6309\u94ae\uff0c\u70b9\u51fb\uff0c\u586b\u5199\u6807\u7b7e\u540d\u79f0\u540e\uff0c\u540e\u79fb\u52a8\u9f20\u6807\uff0c\u5728\u4f60\u9700\u8981\u7684\u4f4d\u7f6e\u70b9\u51fb\u3002\u4fbf\u53ef\u653e\u7f6e\u6807\u7b7e\u3002"),(0,o.kt)("p",null,"\u55ef\uff0c\u786e\u5b9e\u662f\u4e00\u4e2a\u5b9e\u7528\u7684\u529f\u80fd\ud83e\udd73 \u3002"))}g.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.