https://realsee-developer.github.io/assets/js/b93edb4b.d246e24f.js

1"use strict";(self.webpackChunkrealsee_developer_github_com=self.webpackChunkrealsee_developer_github_com||[]).push([[1696],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>f});var n=r(67294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var p=n.createContext({}),i=function(e){var t=n.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},c=function(e){var t=i(e.components);return n.createElement(p.Provider,{value:t},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},h=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,o=e.originalType,p=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=i(r),h=a,f=d["".concat(p,".").concat(h)]||d[h]||m[h]||o;return r?n.createElement(f,s(s({ref:t},c),{},{components:r})):n.createElement(f,s({ref:t},c))}));function f(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=r.length,s=new Array(o);s[0]=h;var l={};for(var p in t)hasOwnProperty.call(t,p)&&(l[p]=t[p]);l.originalType=e,l[d]="string"==typeof e?e:a,s[1]=l;for(var i=2;i<o;i++)s[i]=r[i];return n.createElement.apply(null,s)}return n.createElement.apply(null,r)}h.displayName="MDXCreateElement"},58809:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>s,default:()=>m,frontMatter:()=>o,metadata:()=>l,toc:()=>i});var n=r(87462),a=(r(67294),r(3905));const o={title:"\u6dfb\u52a0\u7269\u4f53"},s=void 0,l={unversionedId:"front/3d-space/get-started/usage/add-three-mesh",id:"front/3d-space/get-started/usage/add-three-mesh",title:"\u6dfb\u52a0\u7269\u4f53",description:"Five \u57fa\u4e8e Three.js \u5b9e\u73b0\uff0c\u4f60\u53ef\u4ee5\u5229\u7528 Three.js \u751f\u6001\u4e2d\u6240\u6709\u7684\u80fd\u529b\u3002",source:"@site/docs/front/3d-space/get-started/usage/04.add-three-mesh.md",sourceDirName:"front/3d-space/get-started/usage",slug:"/front/3d-space/get-started/usage/add-three-mesh",permalink:"/docs/front/3d-space/get-started/usage/add-three-mesh",draft:!1,tags:[],version:"current",lastUpdatedBy:"sansi.lcj",lastUpdatedAt:1669717185,formattedLastUpdatedAt:"2022\u5e7411\u670829\u65e5",sidebarPosition:4,frontMatter:{title:"\u6dfb\u52a0\u7269\u4f53"},sidebar:"\u4e09\u7ef4\u7a7a\u95f4",previous:{title:"\u5750\u6807\u8f6c\u6362",permalink:"/docs/front/3d-space/get-started/usage/conversion-coordinates"},next:{title:"\u70b9\u51fb\u7269\u4f53",permalink:"/docs/front/3d-space/get-started/usage/collision-detection"}},p={},i=[{value:"\u6dfb\u52a0 THREE \u4e2d\u7684 Mesh",id:"\u6dfb\u52a0-three-\u4e2d\u7684-mesh",level:2},{value:"\u6dfb\u52a0 glTF \u6a21\u578b",id:"\u6dfb\u52a0-gltf-\u6a21\u578b",level:2}],c={toc:i},d="wrapper";

1function m(e){let{components:t,...r}=e;return(0,a.kt)(d,(0,n.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Five")," \u57fa\u4e8e ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/"},"Three.js")," \u5b9e\u73b0\uff0c\u4f60",(0,a.kt)("strong",{parentName:"p"},"\u53ef\u4ee5\u5229\u7528 ",(0,a.kt)("a",{parentName:"strong",href:"https://threejs.org/"},"Three.js")," \u751f\u6001\u4e2d\u6240\u6709\u7684\u80fd\u529b"),"\u3002\n\u6bd4\u5982\uff0c\u5728\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u6dfb\u52a0\u4e09\u7ef4\u5750\u6807\u8f85\u52a9\u5bf9\u8c61",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=AxesHelper#api/zh/helpers/AxesHelper"},"AxesHelper"),":"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},"const axesHelper = new THREE.AxesHelper(5);\nfive.scene.add(axesHelper);\n")),(0,a.kt)("p",null,"\u8fd9\u6837\u53ef\u4ee5\u770b\u5230\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u5750\u6807\u8f74\u548c\u539f\u70b9\u4f4d\u7f6e\u3002"),(0,a.kt)("h2",{id:"\u6dfb\u52a0-three-\u4e2d\u7684-mesh"},"\u6dfb\u52a0 THREE \u4e2d\u7684 Mesh"),(0,a.kt)("p",null,(0,a.kt)("strong",{parentName:"p"},"Five")," \u5b9e\u4f8b\u4fdd\u7559 ",(0,a.kt)("inlineCode",{parentName:"p"},"five.scene")," \u5bf9\u8c61\u5f15\u7528\uff0c\u4f60\u53ef\u4ee5\u5728\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u6dfb\u52a0\u4efb\u610f\u7531 ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/"},"Three.js")," \u4f53\u7cfb\u4e2d\u6784\u5efa\u7684 ",(0,a.kt)("a",{parentName:"p",href:"https://threejs.org/docs/index.html?q=Mesh#api/zh/objects/Mesh"},"Mesh")," \u7269\u4f53\u3002"),(0,a.kt)("p",null,"\u6bd4\u5982\uff0c\u5728\u4e09\u7ef4\u7a7a\u95f4\u4e2d\u6dfb\u52a0\u4e2a ",(0,a.kt)("strong",{parentName:"p"},"\u7f51\u683c\u7403"),"\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'// \u7b49\u6a21\u578b\u52a0\u8f7d\u5b8c\u6210\nfive.once("modelLoaded", () => {\n  const geometry = new THREE.SphereGeometry(3, 32, 16);\n  const material = new THREE.MeshBasicMaterial({\n    color: 0x0000ff,\n    wireframe: true,\n  });\n  const sphere = new THREE.Mesh(geometry, material);\n  // \u6dfb\u52a0\u7403\n  five.scene.add(sphere);\n  // \u5207\u6362\u5230 \u4e09\u7ef4\u6a21\u578b\u6a21\u6001\uff0c\u66f4\u65b9\u4fbf\u5730\u770b\u5230\u7403\n  five.setState({ mode: "Floorplan" });\n});\n')),(0,a.kt)("iframe",{height:"720",style:{width:"100%",height:"720px"},scrolling:"no",title:"five-add-mesh",src:"https://codepen.io/solome-the-selector/embed/xxPQKrQ?default-tab=result%2Cresult&editable=true&theme-id=light",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},"See the Pen ",(0,a.kt)("a",{href:"https://codepen.io/solome-the-selector/pen/xxPQKrQ"},"five-add-mesh")," by \u63ac\u4e00\u6367 (",(0,a.kt)("a",{href:"https://codepen.io/solome-the-selector"},"@solome-the-selector"),") on ",(0,a.kt)("a",{href:"https://codepen.io"},"CodePen"),"."),(0,a.kt)("h2",{id:"\u6dfb\u52a0-gltf-\u6a21\u578b"},"\u6dfb\u52a0 glTF \u6a21\u578b"),(0,a.kt)("p",null,(0,a.kt)("a",{parentName:"p",href:"https://www.khronos.org/gltf/"},(0,a.kt)("strong",{parentName:"a"},"glTF"))," \u6a21\u578b\u6587\u4ef6\u662f\u4e09\u7ef4\u9886\u57df\u7684 ",(0,a.kt)("inlineCode",{parentName:"p"},".png/.jpeg"),"\uff0c",(0,a.kt)("strong",{parentName:"p"},"Five")," \u5185\u7f6e ",(0,a.kt)("a",{parentName:"p",href:"https://unpkg.com/@realsee/[email protected]/docs/modules/gltf_loader.html"},"GLTFLoader")," \uff0c\u4f60\u53ef\u4ee5\u5f88\u65b9\u4fbf\u5730\u8f7d\u5165 ",(0,a.kt)("a",{parentName:"p",href:"https://www.khronos.org/gltf/"},(0,a.kt)("strong",{parentName:"a"},"glTF"))," \u6a21\u578b\u3002"),(0,a.kt)("p",null,"\u5982\u4e0b\u793a\u4f8b\uff0c\u6211\u4eec\u5728\u9910\u5385\u7a7a\u767d\u4f4d\u7f6e\u5904\u8f7d\u5165\u4e00\u4e2a ",(0,a.kt)("strong",{parentName:"p"},"glTF")," \u6c7d\u8f66\u6a21\u578b\uff1a"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-ts"},'const baseURL =\n  "//vrlab-public.ljcdn.com/release/static/image/release/five/demo/gltf/";\nconst gltfLoader = new GLTFLoader();\n\n// \u7b49\u6a21\u578b\u52a0\u8f7d\u5b8c\u518d\u8f7d\u5165\u5176\u4ed6 glTF \u6a21\u578b\nfive.once("modelLoaded", () => {\n  // \u8f7d\u5165 glTF \u6a21\u578b\n  gltfLoader.load(baseURL + "pony_cartoon/scene.gltf", ({ scene }) =>

1 {\n    // \u52a0\u5165\u5230 Five \u4e09\u7ef4\u7a7a\u95f4\u573a\u666f\u4e2d\n    five.scene.add(scene);\n    // \u8bbe\u7f6e\u597d\u5927\u5c0f\u548c\u7a7a\u95f4\u4f4d\u7f6e\n    scene.scale.set(1, 1, 1);\n    scene.position.set(\n      -2.8741698071921214,\n      0.220446049250313,\n      -4.631508324407246\n    );\n    // \u5207\u6362\u5230\u7a7a\u95f4\u603b\u89c8\u6a21\u6001\uff1a\u66f4\u65b9\u4fbf\u770b\u5230 glTF \u6a21\u578b\n    five.setState({ mode: Five.Mode.Floorplan });\n  });\n});\n')),(0,a.kt)("p",null,"\u6700\u7ec8\u6548\u679c\u5982\u4e0b\uff1a"),(0,a.kt)("iframe",{src:"https://codesandbox.io/embed/solitary-shape-8t8vy0?fontsize=14&hidenavigation=1&theme=light&view=preview",style:{width:"100%",height:"560px",border:0,borderRadius:"4px",overflow:"hidden"},title:"solitary-shape-8t8vy0",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"}))}m.isMDXComponent=!0}}]);