{"_id":"alibabacloud-tdsr-js-sdk","_rev":"31-48ad30f67c9ef3545c1e97bd8f6133d0","name":"alibabacloud-tdsr-js-sdk","dist-tags":{"next":"1.0.0-beta.3","latest":"1.2.4","beta":"1.1.0-beta.6"},"versions":{"1.0.0-beta.0":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.0","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.0/build/index.html","gitHead":"210b22a085a8a93047a2e62cdb0f7bc0de108325","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-gwq//bJrt4N6eekoSr9bnpBwv5liQbIrVscGUX3EeMIP6S5EWy5/c9ddY2dg3UDtFxUjSCz7+jRU0fUbmNxdEw==","shasum":"98cc06a75dc3323df2f1014539c8c355eeb49594","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.0.tgz","fileCount":77,"unpackedSize":2049075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLU8OCRA9TVsSAnZWagAAJEkQAKN6cjSQhmltvSggWMqr\nXcReuOfifnrgCWGo2hwUzjl2OxzvguWXigIOGClXw0XCMnXOKfVgfWhvMjbr\nR30n2chSe7bcS8QJI/BOaJT//JQID49Tb+SPpYvAUE9/ZCjhdTyeiL+K888i\nZ9taHDS9LVh9LEYwLu9FsH54kFDlq+sSznoCeqwLj/MKzRk81X0hAGc9TO8y\nduOPOtSZs06Z1GMoglJH7gHTZq4GlODI7zTe3luX+DdcnXli9hJjyynorq7M\ndOWthOtmDWPaQ5gjw4JfTo0vZhMPK6vPyUD03I91UuxuITPRemaHwSe2f/H1\nu1118Db4WE3qXw4oiMPgcxO8FMZTpOrXQdojYdBTovJGo9SmNnIg2iM9vUr6\n0sf4gz4wpBdH4j8m9ao1rgFJcE7F4HW9uPYcy1Na+2kKo1G6L4Vi1eU6Hq+5\nnpe5Yace3ZiND3j3AVR7rk6OXfBTaDDN3WENTGMS6tWkF9EKuWlwcSk1eJuf\ndD9vD9iV/Fn+gKIxC6y7EZqe0YRN4h5lrRSEHmMUrXhjkAokVkAl01GGrhB4\n+uOt9rCbR5dG4VD1Kd/myTQ+ow7+LbIKZI9qe6V4dBTtzPoFJ99NzzSfzt64\nHxxIImvMH4T4CHP7gfF/wXAzKXt91co3bNaFdZdTGbW5weYfDQauo0N42cxs\njt1T\r\n=+Sk2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLg6+VBmSzfHTOJrOpxDS7S3BECqdENziPsnGUzL1hwgIgZ+WsdKoIwftSv1Fw9xfRN9mXzCNJ73ZSQowdR/aWGng="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.0_1596804878337_0.05063127011265012"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.2","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.2/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n\n\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"f5e90a26fff5aa4a9313d7fd53be81dc60122354","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.2","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-dp4VX4xMZj9F9L9vCcDUp9DV9TEhnNyRJ780MppgaQUJxemcDNX2aIaf8QapF0U93+q7gjwchjLEVPn17KwKpQ==","shasum":"0eaa963efa976959020d4da2dd69ba57d5a18a6f","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.2.tgz","fileCount":77,"unpackedSize":2049075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLU9nCRA9TVsSAnZWagAAjAkQAJCjLAEIeDl6unDiKzBA\nmyqtcheEWNdKs/DLCs3dh9JlAnb3xE/uDbO7z/QQgTXEdsHqsymIJndztI7C\n8vkuNwLyec16qItMC82GhhUNXQA5g3OPd28mnD0q6fbmeIC41ZhbkO+pmMVD\ntKRVdFrr3a9lv6ta8N3mbMlYZdj9NlhwF26jRNgg1CmHuedST4MIWNFwEGC1\nP5FdIFRhO6CsNHWhg7Oc6OZqitVC5codwMuq1HOr2eGAibe4vEevHCiL/fDn\nsIASNYcUg8YRp+CbYo0byIFlyTNG8BitJrrnW623lSQtNOa1+071J/ScJxTu\n9VaWCsPPm5AgIIrEk9R6LWluy94m2l7St5dYKtD4/MWjKG+rJaczsJouR475\nQ0E37hs1XyaHZQNCRu72nTDxK5I+2QndWwdex0BbTHfZy6Qypyvs0ZpKRWre\nZsV3R48nTVxjh7bseBb7c7vj9D9KYAlgrziP36z14YMoE8KAxVM7xRTXp2AQ\nxpShoJBlkOCBzROwEBRjop2l5H3+EGPBEMlNO+FhLLGBjQErZpx5uCGtZMB8\nr12wmsf5oxV3bAA0ZzcgpIhde3Cpa+Y/emAMdoC3Qsx2mU2msRi+qcCo8QdV\n//yX8tkE1bNtj1x+t91zcAB1gnceuB16Zz2IIvNtUJ+PTB817j+WujVinY6B\nuSII\r\n=aW5c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT9Tyhoev8YeBTeyRZiC4Xf83NNptqNvaMFAMuezQVaQIgF34CTkyydoAteamj9a84giBGHk4i1+6Mf59l6HCjSZ8="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.2_1596804966575_0.8799482802017371"},"_hasShrinkwrap":false},"1.0.0-beta.3":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.3","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.3/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n## 1. 背景介绍\n\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n## 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n## 3. 快速上手\n\n### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n\n```jsx\nawait player.load(token);\n```\n\n基于React的完整代码如下：\n\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n\n### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n\n```jsx\nawait editor.load(token);\n```\n\n基于React的完整代码如下：\n\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n\n## 4. 通信\n\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。\n\n![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)\n\nPanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n\n```jsx\nservice.registerHook({\n async request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n## 5. Panorama Scene Player\n\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n\n### 5.1 Constructor\n\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n\n### 5.2 Load/Unload\n\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n\n### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n### 5.4 API\n\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n\n\n## 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n\n### 6.2 Load/UnLoad\n\n见 5.2<br />\n\n### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks)\n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n### 6.4 API\n\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n  - 通过注册onCreating事件回填标签内容\n\n```typescript\neditor.registerTagHook({\n\tonCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n  - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n\n```typescript\neditor.publish()\n```\n\n## 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"34ecfe61a09e000f8fc545a5f97400b75987836e","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.3","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XeEtB3B96LgXO0tCh+p42cuX4/Y7qsOWDSMabMiJIwcUoU/ByrtRrFUSysY/cSqDR4yBIjPDjxseweFIkuWkcw==","shasum":"8011a95764db8ece70263c87f6709dda52290bbc","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.3.tgz","fileCount":77,"unpackedSize":2048702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLVIJCRA9TVsSAnZWagAA2tEP/3IrosDJF/zR9HueGc6a\nG0qcpSJfy1MRaYtb+9WUe/4J1we3fUqGL8Vv4L94AaVsEqUz+dV+sc4VY0C7\nWtXz45ISBZ3RZi8dEKim9CKKO0dpOWLlLDa8K9e3SQtJ54H8m4kpFP4mKWdL\nsxxadYmqmP4zBhIWWbfVClXX/boQ2m4ZASNyN26n9rqyUkR0HVIwvRQaG+8a\nalUHbt0fA9/GIuAvAiCi04lr3Oo4vavxQN7vshZdJVqQdYd41bc9m2Jdz5BG\n0a5LSOVVlIuYZU7Z6IkL6nn/XaoLepRjoCgBlSvYXpUjfMM38HPXQXl3CDNX\ntjGwXo/KVNiRbDZMIlcViGc0MdkDzzOMm4y5+1IWq8Fc9wRMViaatdTJuxx0\nqMcpvPP9QqS3ztk5i5/AMxMD5ZxFNcoAblsSWSuQFQZch8XXEm2GjG1l6yIk\nSmuCt+nTs0iwJyx810Q3XJez0hgCZ2SV0+u3zF9+xNTYSg3SgML3o4g4ajo6\nsHIe2JXvnjHE4PgO/nkJZKz0WoivGFrfEx5CMby3+0X/px3i/FFdq1bBJ8Xl\nIfTlVoSyGULWYZ5AHEjIf2bE06qRu+FlgathkrUXsD6zwj+17/MHJUGjSuj6\nsDY9I8gOgj1OWlhiOLH3qe1PZUjRmRaIXIFNF2ll1i7YtJmJx4JBELt9kalb\nGVQM\r\n=MJJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlY15JqGM2Tfu9eQsdbtt4NOAn2WHUXWn7lC5yu0eaBAiEA04nYh5NVVIjuvaSgD/byCRZCzBAJqv9oy/K9eDMiEMc="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.3_1596805641110_0.9492486188790004"},"_hasShrinkwrap":false},"1.0.0-beta.4":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.4","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.4/build/index.html","gitHead":"cb11b8a30f1015eeffb25989a36c698f66641162","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.4","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-PnFn+NYYetacPDHrxzauaL8lEeB52m1v5UT56+O6uyH7nGkWN6igT3zElCkb8vJx07ZvH5p4tOt+mNG/AAAJcw==","shasum":"6fd38bd6e15bc82998a35b25bc4d7e2f8012b67d","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.4.tgz","fileCount":77,"unpackedSize":2049202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNO8CCRA9TVsSAnZWagAAUx0P/2huXZ+meWgctyOqwRSL\nNt3/H+jnYt+mME8s1HGnRypPysKHerhN5K7xrt2IQOruMNDZRxcW2KEJ7s2F\nOgRbPONd07tjhZnv/KIQ4uTMmfMqu19I4QxU8LjnIJVMTP3I98l06ZjqmnCa\n8Ux58B7W6rkz51Ump5bIj7OUiNdgiZxpPboHA5yndtK7vxiW//+OJdCiOua+\n40wDx15hWseaDBJKugaDeikkA0sfocw8JmvisJ7h71UBch04iJT2ntdegTd2\n00Yq7bcXs1laEyww9ZBp5zxi9bvKZS95fY5p3RmNKDE4T1m+0VMUvcdBEUTj\nTvznIIZO72e8ZzVh4v3FwvRdevJNljR5qaT0m/Tjy5CxmG6V3RmWrTswrBiz\n815X8m8AQStsW9xBChBiczUW8I2XZ8WExKcXq08egZatXa18zTnu5EQkthRD\nkTgL+CNU5hwT3uWTb76dt61TstcWAr416+7L4ky4lzLVJrue5+FYxDvzSjBz\nW+Ktl1Dzx/h6FCj9IEHqMLwD2hnhyVYmKHGQD1v63WOfZKVuXR7skK8QmCTU\nwejnSqPimGgBAcrCLwfDK2KnBS5TUQE10xRg3YlF6ApT2KEZL+JUSDWraBwL\n44j3yHwJpymST2STgJgQD00nKehYMfJCiXiawJiWBK/uTb7vg55S1BdocmUy\n6T5w\r\n=sIk2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8e7OizCXfEPyXBRuT7zIltiBd6czMjdTdomtew+bU3gIhAKhKAuEb7lFBnL0jevTENecfRKSjKNfDCoitZsJycNby"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.4_1597304578315_0.8032119299219755"},"_hasShrinkwrap":false},"1.0.0-beta.5":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.5","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.5/build/index.html","gitHead":"cb11b8a30f1015eeffb25989a36c698f66641162","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.5","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-7JmePcmbKKJ+8GAzKPKiHQNECiCjqhWoNNIsmR9pi+FtHRlTqXf8ShJ/Jx3BL60iKpMPNaXrFgaK5JRwUigBPg==","shasum":"2e73f5be1022366be25c7b4117add2512e5392a4","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.5.tgz","fileCount":77,"unpackedSize":2049242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNSE7CRA9TVsSAnZWagAALVYQAJrVle4yx0CNMz/XeFKl\n97R98GThGxH2j/y+IgDxB+ZXD9ZS5y/lEcB/7p31Sx8h5lMNc0NwR/2KpDgO\n1YRRZShYsSIQgYM/b5P0WA9xO+txrkgBeGjC61+jOkloTUvgqiV2vnD9EKK5\nXyw6+rAXI8FG/uBuAyhmV9i45MEOvMOcgHCurEYWlA9DOlptU3qZ8veBMcU1\nUjz67GsQJ/gPR6A+REHHgGy9HFz7AzOd4ra2MGQgBzmaL3ozLNYLw1dYkKvC\nBg6AYWUO8Hkl/JKPBjNcm/FDcyNmwEuTsEpcgGv8YFnFOvXAhs6jmFMFGdE2\nYwx/xyw4qZVzGGeGiNhYd9jQNQ3b4l5BA4mrdpYr8SeAghZDg9yn3RIWPgx9\nZseeg00bYr+MEGiF9W3IB/KM3/fFa1zNDLeCgtqxEm5SSlpv+vGWjeNk0O6R\nUDeES1QTb5nUwV+DC0gBWAhGerDGGzvhNqHZdlM6vBofCahCspExGfdXBtiG\n3YxMwchtAStj0NW6cJswOonvgqmXOblTesnWzPo6m74Xhvo399FeswxOetmN\nMkxVIeDTxB1QupLqVYkTO40i88DVAxXt9+WSlcODh5dBeDeWr4ufxZ3/fnb5\nJTH1tvfcZkIptE4/NUJGb/sDwpZ3W71TG4LgQlwUoB3NWadXKOPtQ9YAA/FX\n9D3k\r\n=hC4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi3Qx3hDdxmHMMr7oGYNrAkYizV0kw62pIB3nX9ChLqQIhAMZnWP8S2WWVLFFKADotyZrnnr+ksOf+dCMk6t723Dst"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.5_1597317434286_0.24141711870140647"},"_hasShrinkwrap":false},"1.0.0-beta.6":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.6","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.6/build/index.html","gitHead":"e510486daf6d01011b5830c0afb9bd0e3afa15e2","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.6","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mc9KWip1sNQRJMNI47OQzjBe1eT1oqhayq+KPJqJlWWIzshHPcMi/Nt5woSm5PYMX/6aT/pyCDq4ddQqURJr8w==","shasum":"70fb537347328eca830a9f697a9a1fc39c279bbf","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.6.tgz","fileCount":77,"unpackedSize":2024201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOnorCRA9TVsSAnZWagAAXj8QAJ2IjgIToTT/jw9hM2Lq\nkRm8Wudo1tuxUsGIz8LZpG+m5DJltXPBd43zJpYi7+QpnJ9vlhVTTD0d2RFe\nK1zsv6uGR+chZEbMW0ewLw2GF4HMWoecsXVvvSt5m9uCEgGW6kMuPE1LSxrq\nlDv6OUZ0wd7fJfP7FOmX/7XdRK6JXoQxf9K/RuIcwIaSV0cpQ9Dy5Vu9s0W6\n8+zNWOfmpxw0khWAnvGajXjKIAZUoSpTGFVkygAuT6PDKFcM06278ipZwoE2\nG1EDWe5NhljZInWeZ4Bldk7FL1w3kUYsIc1RgYanRWgIkxjpowwkvboA5Q/P\nP8QcR4vXQGokXjzHh1YnN9D91lib2n449u0MlfHm6m4STCw/t49QO8OzMXfM\nx/Wi5CqZYxYWucBLebu+QAXLAyXsFAEBB9dMto3Fg4K2QmCToAb/pIHzZA40\nKEKckvV0rlYASfzS3huWe/dmqzmE+o5ZupzrpO+bgBBi3LSiLUqmAC4+KCMd\na5bpQZbpc9yJ3tRR5CJom/+VE3pH9krHTjQfc9fmEA6BnxvjHvAeNdH5+2Ow\nmWvCRj9xuQ8SS3GPeJHi4M/4IVWH4FSseltTX5Kib9FcZE00jtjIFfS0JA4L\n2eFOOHCMAnXKZurTiA6n+Sya8IyRDE6qgxEWmAKirZtA4GmFVJQSZXFGT+Iw\nAU5j\r\n=Kper\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/dlWms1hkL42XWnfOOuF/WVEvA92TnS/ktB4VnnhzRAiEAvhIYJi0+5IufK5pYYglDQ/FbnkmJuRNZalADmyxuITg="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.6_1597667882677_0.014042127712829977"},"_hasShrinkwrap":false},"1.0.0-beta.7":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.7","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.7/build/index.html","gitHead":"05bc679374f5a6dfe8b8be98d2ee55dc18a78eab","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.7","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Pk6GhEMN9FXH1JtBmg7kKV+n4G2Zbs6LAkhsAThAhNpjYRFkdeLNqL56gN2rd9bxW9GVoOZqIhA7EQMzsUTHuA==","shasum":"166af9479021b69372601b16b44034b5c24b8a2e","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.7.tgz","fileCount":90,"unpackedSize":2115774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO56UCRA9TVsSAnZWagAAjSAP/iphs51UCXt4y8USwshS\nmthtOx8XMroFL/4q98OrFG+S2HaPtBoh7al3YKCgOTBt8PMN0FjR2x0FE3EM\nMs128HWmfVD/z4MhMReS3Bv58p9HnRPLP/BXmJfjrcpIxp/4/mZhfesPC0VJ\n6UohgYYnuh3VPviwC6+ocGmDZOVEVRlHepYdhfeAxZMb5e/hEusSO5uswbQR\nRb37MxHy+dDLNZapseYAOk5Qyhzd3bUg43fWvnLINGdkCJmN3yzzB3roktaZ\nrb4MrNGf9gwWKYlIrdGI24BuKd5o2vginwLN1qM+Liu72WFYUu+1KM5AeacO\n1PWD7DsvxUbioulLbDvAx4eKuBVXWelJJ+9Y/UwL8FZuAIDd7XWe51fClawz\nnJxJbXoCtwJH+aKOjhcVYns5anb2RVf4qgaJh7t3IGTHp/TqHj0zE1piVtrK\npGVIkHbr9irRJlugF8ET397Jo5O4Qovn+dI1HCaZMctzBu6+zy6Q31e6g5mc\nDSll5D236q02s+oXheSQolTfsvK6U/AojztFCqDdoipqbtCh0E7+HUL1bmjh\nc31lmjHbto6Kb/sFOaL+pb6Yjw1ldVDoHcImFM4/CfZWktZg7DQpkPuWoZCw\nKjKehLMhTG740ozkCXbYnmKPQ0cN1YlJv20gQ+2LDHtmt/kv6SxkckQELIYM\nPR30\r\n=imw/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHEdpk6qBqhjKOpmfJ73SzQlHNkhRzZnbqMx3VYxTLwAiEApx2FHlcAV5dtRy+iTYIcxn6tkmAmXOi6YWmCBe1tX8w="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.7_1597742739605_0.10931705205781639"},"_hasShrinkwrap":false},"1.0.0-beta.8":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.8","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.8/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.8","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Ps1o6bqjufWQ6kxIRUhwjwnah8vKzLU+ZsJ1fCuNgryUyiHjXkWclssRwmMRmS6LWWubNndsysl9d5V6ZRgScg==","shasum":"2f218c1dc473dd5568c52bdfd125543a86ab009f","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.8.tgz","fileCount":90,"unpackedSize":2115789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO7pvCRA9TVsSAnZWagAA3+oP/2U1MCiQfQeomxfKNh/8\nZoxkLduDLnVzbESRApBC4Gs4zvrjAm0ogGJOi9DyAZfLy9JoCF66L2EKvb9V\nroZ1tx9IMYP8q7nr4B8dm+WcgTQO68SPuMDE4RwP0t0uXX3aBhL9IuiBQXPU\nRg82nN/0amjWpeCG+2twffAitPGSaFwO6Npx1ufO7Hk+G/cHbPR6+naZzWBW\n9RAw38WV/35znZjjugvpX8RuB/Mb6BQ5WudeWLCM9zrRkl+sLT16mMqLB/Yi\n7hf+8Qg6bj0LKKH4rFq354I+PN6743mbn9MOzrhtja0T4rRS63ZKOOcC7bxe\nIoYZrTfGw9vjE5qJ0Fio1To+YBQLEBbFf//wzNFX1ZWJGo08d3JXXof9Sw2+\nqvHwd4FlQBCXY6Z1Iw6hfzm1o+KKtDsi+r2dWVm6aOOsMwcam46C8CTY/9Aw\ndG8SvnVXlxEPUEh5owJlxWF1DvcLU+b/M9UZmzYVNcHhhRPAMehlAjk1LfsX\nEnULb8osll/N9JFaTVg3u1OifxbS2DtChfXNEVAkXp7+LDyXrBw5P3Eac9fu\n/Bm1yrRPzilEPryTLvuH7vp0J2pBz21lPmKYw3hb6FR364WdXwGXLMrgFVUV\nV3p105RHA9cjceug8ybMNWs8EaDsvyZQiKTmLsB7svy+PMfifR3WkADGAFvV\nn87l\r\n=8krT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4gE1aBykUfFwFRG0T1jnHDSe1NdY2iuRFpUI5k8NVWAiA+3h8psN0fj8W9ly4mav9RRiVWv2Lam8HjRJusn4A1Sg=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.8_1597749870342_0.8479812053586675"},"_hasShrinkwrap":false},"1.0.0-beta.9":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.9","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.9/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.9","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Bd7my2bYJX5T4XScEX9wXy+FiqFUZn68a1qbfTLn/RUVsMK5/YMCQJmAnJ5FZcarV28u7tDxpem5Hxt5btnMRg==","shasum":"973b7741d9b5ac73e79e4aea8e8cdeb940b8571a","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.9.tgz","fileCount":90,"unpackedSize":2118388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO8SwCRA9TVsSAnZWagAAkYwQAJyquofQNyAaXd1c6k9T\nTyZB6pfp1rqb2cJOEG/RuUl1s4t0wjd1S0LwPgRKX6pPz7f9hTX8EC/OngNV\nhFwAxkl93oPCpEr3NkG+wNTI5Y8Jgno0vvrJw5bhMVi+/I7xoNIJ6REAY/JQ\nGguucyd/yh8Ivx0W0uxVFJGYQbzQgm2R6i6eVdwmVrFXee0R4whpKJnUQ778\n4YcUsgCHwJx2gt9ANvMrCfu6Q9IjmB5AmP0vA3X3jkfw4pHH6/+9EPG3PIVv\nK2OrgwYPVelAnprSkdyoObPVav2Sp/kqgGG4AM8B37Gc0broKMmOkHRW9qcV\nYrTRznBy8vCey8Gk/TNftSNpALwp+O5J56ze/c6VmlzD/YsqqmPYYM9ZdjGz\npvOrfuC5ajuUPc3fLl8dKzYYE7i3zSEhH4Ere4Z+GL7UhAGd6ZZ3Qfylbxwt\n1f5mQTVBgCAPJbO495vahUGPx0p8xxqfZT11yr5Mlva09fU4AUbnKNg5J1VF\noTY/ya888mpL26JzjRvkwyCQ2GHt/THOkefPXkC6TfT5k8RNqzcLMDFn03rw\np+bmjtnms4YkknTTGUdiFQv9ZH8fWP2HGGMJ2FDJ8MHgdseUq8ri4uOU90WA\n+Tf44JlA9YuRKXwsBHlgnKqJd1002PgGCwl8afOOhl9NCogonzz1kzktkry1\nDcxb\r\n=xwDX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/kAySyT7HpH2wR3Gj3TyxfSP4Htqnj55VdUTKf1JX8wIhAI6ldInHQpLryz2eL9NPkCeHB6sn4ChdMOMYM3e0Z+IX"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.9_1597752496216_0.2592160567646369"},"_hasShrinkwrap":false},"1.0.0-beta.10":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.10","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.10/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.10","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mWDa0kF/BlYU8gmbrZfAyJD0iIOFVYMh+8PgfTunDp8Hq8ZgMuWMebltTCY/g0W+ElIr2/wtVmFvuhoQpoLQnQ==","shasum":"855243496c9c1cab07bbef0f95f3e10f2d5fdf62","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.10.tgz","fileCount":90,"unpackedSize":2118104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO8XTCRA9TVsSAnZWagAA6eIP/1pyuUH23tht+BnpeV88\nucm784KrAsGcI+qiYeygjNFXBJY76l5EUMjGO2wgCpllQAd/La0WWXiSX/vH\nd+8OlXMibJtyHvwEiGMx0n2srxmEvWPgmqwNGcxO/uhc1ygF+7E92BbL9E2E\nIJtj5jAavn2JAIP+bK3zmhQZYGyKRqINXHB/u6JD8B2ICBm7PpkuMPweOhpm\ncTD9tA0+o0MG/fjeFCaaYQ5sOsffsOa8XQiYLKLqB+7zfiC7JKxUKqG5I9jg\ngCAn7tAwF/n5Kwad6Wh99ZWksAnMRGjEi4JheuwyPNUguYUnaBGFY/aX9G/4\nAEg4+4/EcIC/yLjOLrVne9VW/KYnE+LtU44jVjyYH7ffVxubdUWJkIXJ3N7E\nireWh7qQ3hmpGLN58efsinURSqFrAV/Ub0toJzlBXYK/Lq9Tm0Zac9336PlQ\nsYRg80RIkYrZr2+5oyt1Ta0ob+Ut35AS49ZGAW1RhVFCiSLavqX6+/rKklmo\n5DyB7h984BgSbhVWc6hhNYu2NYoopXegDqHAWqnhGDprZCvt7us9AcNHoxAY\nCDP/ZltdZqv8PQOpSwLGrbKjZ3NoW3uMtk33gUucmg3I8E3Fa8wlukVeSUHW\nY+dBuPT8VDedMlMZHJ5FNc3gOhB9FJ8LuMVVU5OXyBD6/8MWk8ZSTNLtUZBR\nzIcf\r\n=okx3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSEqdJBCoey66o2L19f6qmZej3QFXsx6E+KUtlWZeY8wIgRksq3EjkcEzOeS/U/niQz33bYwkrxuMMXQ8a0kIkSH8="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.10_1597752786640_0.7511859081051835"},"_hasShrinkwrap":false},"1.0.0-beta.11":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.11","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.11/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.11","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-2WcHWtIuZs83EYyGxkewmL6ieRCknPlPvH2EioiyvT7S5DfmAPAoZjAghW7MH7aZYhAbYgT94AP/YTCxXl5HXw==","shasum":"14df932755fbee72e6f221193fb60406fc23bf1d","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.11.tgz","fileCount":90,"unpackedSize":2117896,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO9BGCRA9TVsSAnZWagAAUl0P/j7hNH2gRWOV/vNi36Y7\nIEVpT73exTFZwSgc7RBMVcY56R1wofQe+anA/rEeAn82PM5u8kTUGLKrJuSC\ntplYP36Q4yZrIiJ1/ZT/7l7cKM83IshoIo5FHHC0tmt9JGXEsKYkRRjp4ztr\n1JlZe08Bnvn309SUc2PayvfYEMOxCNQSMglHMsN9WPhBul+TPCxUtyac9T0R\nD+P/zD4W2+/5JGnBwdzyryJJGancJY9KOQj6grp3sCKUy0nEqiFpvUCb7Mcc\nwYfCWupE778jpMBVBh/mP0H9sVzLRfqQeTNpYCkAaI/uowAndznRwDaRtQhn\naBhjYYTlAwKNC+4kbOLKiQnotAD+PhVBG9O25nFf4PQLzF9rDGVzAIdiLIwp\nQ9w6cd204A/BwCZe0t+ZlUhpjgE+WSLOdrwdN5ZY3CIobqgXYoPU+u6rDtsg\n6ZAvdmzWvaAyH8uubwaMqRB/6iNw0j/Ss+YjBpy8L/NSC9pAlpN9xjIIYAOR\nLZ540C+tvVdZnMRtgCgq61f2+7yUxPp30ZhKPdTG3W/O4CL2cs6dDtFRnSyQ\nIkAXVD6gWmUwUD/yzetTO9lSkxP64Nyj+RHwl4KPYB6NfwpqOTR0tet+rh+m\ntwwtm9SCoZl+mlCcHOheTMhYIhir/iodbivV93ELtgf0KeT2vifMyGPiVsA8\n5h5u\r\n=FEis\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Cwxz8BsdzQNBiPeYQCJzgx//+RF/3TXoU2LMYX9cJgIhAN05Bkpj0BNksC6DbJTOjTm7pDseB5COnGMyqurhauvW"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.11_1597755461379_0.7352932803538956"},"_hasShrinkwrap":false},"1.0.0-beta.12":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.0-beta.12","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.0-beta.12/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.0-beta.12","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-2vanj1EyvYfN+jKj9zFseVD2qic0zBzx7qHzV8iG648fM+k+OqwpKn2KCNRC8jHBbsxPSq40f7NnxEvqKWEAuQ==","shasum":"205d03c2ad3df22d0774cf9291c6b73ab8d6a04f","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.0-beta.12.tgz","fileCount":90,"unpackedSize":2117962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO9tPCRA9TVsSAnZWagAAJmkP/2D2wGsHIvSab1Y8c2pg\nDKB9S3IXmE6cmRG/s4wHtLCaop3RIAF1psKyFEVm+8wkClvWZFYhCf/27Bx6\nuG1g4/rtVnr+boXDffDRaflttHLnhDC+PQYO5qDdhuZBZ11ZlU+a51M1UxXQ\nQ1SQOPvgdrGhutnlHCIFkJ5BK94zUSQ8PCRdF8bva7HP7wok9NDFNaOaikuu\nyJIyK6ma6YDfg9c+sCr7M3Vd5uXBcL2VrRqQNTLX9D7SwEaz6fXfSBDzgOsX\nNIGaediwjoX80QOwF+I+ORcY9fcNrj8F+TGmNl8ZcNxJ7E1L0MH989Xv6mCN\nthW98PEp9OHhhqfxIeLzBXY+qIaH+qk9Yx473t9WhCKQB/PQyiNKgS8Vx/e3\nqSRrYGi8GVWay1CryMqfJ98W/wnxo6DZDAbJVMoKFC5TEN1qzuCVdpzlKebP\nAy9EWV9n4HtzS+SHwVHeHzVqJckip3oMOhwAp0JnH/L+SjU6dlKQxN8lAB8n\nKtehAYf3LcHTAkxe65XMHwb8aqemxeQkCYtQN2ndYr0gLvAXww5yY/SUkTsJ\nGS1EaDPSTYc9pF+dvhCCjizSgXj/2npvVUgY4LNgfMEDytL476HhzWfgM8Ug\nPjYENuXVgqyUVSaBlWgHls64hDu1fmbHWFNdNRj7Ems4VD7bbn64cQGn0z1Z\nDoze\r\n=kBBl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1NgozD/wSbXlrSqyirvfAQyf1KUHXRnYG1aA4usdjowIgTXvJObSQfUs76aT4mNVsDIFunInTrs7B/LKBrg20ZCk="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.0-beta.12_1597758287051_0.5514238250989543"},"_hasShrinkwrap":false},"1.0.1-beta.1":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.1-beta.1","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.1-beta.1/build/index.html","gitHead":"666cff85f0651e800ec1cdb71155abac90c253da","_id":"alibabacloud-tdsr-js-sdk@1.0.1-beta.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-fICV8YGSNZDpStyEUNubtqhvZ3IRlOps81Ja+fy1/nihJyayAt8aTUXu/4HUrjtZWGE0AByzXJDxuQu42SMCqA==","shasum":"6f62174f091f369a637c4c70565521006d4297a1","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.1-beta.1.tgz","fileCount":90,"unpackedSize":2117974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPA4zCRA9TVsSAnZWagAAlJAQAJ1f9q+nDucLqy2Y1uC+\nQrmd0RKmbjNsN1VeN8/q3DCcrqLci7/Nkd/5zeAnpQOdHGHDjS9OIEzFhjFu\njQLrhg3CRQxkLtgfN38cbhynK+9dDDePR14DVGqt2AM0RJNDypZGPl7pTYDT\n4Ch8uwellsf1WQZZmlJhg6ajb1dP1eUTwU/K3aAhRZTgXl3N1zFJDDEmETJj\nTopRiJQq7Jv+X6Zd6NUoEVJXieT3Af3ucVrtuSTGUYLf35d8775i7y/Jb5mH\nS/LOCuwnMddFkfSNw4i5VcukJ1XQOEFV9euoyYaqcIAE2TDckOnsxIPgUyiv\nfYJtpQJKyBSeRnlSVKBh7DtPCTztWFz7Qx7s922yrF96lkliOTzQaHGV2HQo\nD1L0otauqR93wLgWnoPsZExuCjcXy27XPeCF5yVbMRRBJjPrx1bxcpOiTK5h\nBPbIZObmhhj1TdOa4OAam4Azs8np8fuFldphrH/NCCJtGHsLhKdLn3ohB3rw\nhCfzmH5tSU9bdEB4iy8Sy/9gsarZyF+MpIvKE4PHNMC/CHmb84KeJcQDGdSP\nKYD3jypX6C+HT7ZxMb70cyEq/s0mzQRYHFR/84wZ8HNe2zolF5bqqchkWCD1\ne3hHCA0k2cDvYYLAXOj1Y0AcKkWsI81aVkL3TuOwagFbogP393ZqhsD5ndXq\nNhEk\r\n=IVXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5ohCINKnxCFGQfG6sKDKH9v7hxCdddoxGVfOQtrzy3gIgEiY1zBplVDBtv7cadHQKoxAkZGHnbv5OdOndV6gV6l8="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.1-beta.1_1597771314133_0.2341926559022509"},"_hasShrinkwrap":false},"1.0.1-beta.2":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.1-beta.2","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.1-beta.2/build/index.html","gitHead":"8c6590ab56206d90b119d93a2596409faa99cb05","_id":"alibabacloud-tdsr-js-sdk@1.0.1-beta.2","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-rwKKRFv2yE1aPWTu0LMthBpBVWol80RFq2nsS14BSHEzbNif7JkfDVhf0Kcq2PbCOeggr/yzZ5JlHr+fR/0IWg==","shasum":"41161d6842a5907bcef52d37ba80c324e535557f","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.1-beta.2.tgz","fileCount":90,"unpackedSize":2115609,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPKwoCRA9TVsSAnZWagAAHN4P/0bBBUZxwTwth5IK7qh7\nsM7jwDtUyib9u44echV7fnRC2KjH9fJqow4CWqg1BNELOenysR77+XgqP8Ln\nkvg7a7E38N/p8HMutgvAdTPmdL6KKmsY6ljf51sQcXIxDiYP/xSjrKhiFpTV\n21gnQCnARSjY39gElQMsiaas7f3/2g01MqjPhvDqpj9vX5ZFEn2noa9YxoiD\nfjUGJCUnguoujqlzPRSgzTWRTju3QRQfEQi3iJQWOfuKS3gOyigcNSa+oZbI\nsBAFZ5T3UpkdyWDvhl8CrZRJ0UGm29hYjuvXPSNpjqxSJXtrIcwoyGj9NDnd\nUziFt+9CPmfi3sZ98J21T3HWrK/Te3n9ONwYdaOmmVe1kAW/wO4Npa4sDtWC\n6GW/tbYBhVs++K/wJcAeEGUUaI56LDpORiesogWWH/GfdgsQaXx4ww3Ekxbe\nWFbdbOXByhLwTSpGlDoBwZL+DT40x9Z62jU4Jm52SBPf+o5xh3iwn/mQWFZM\n3hmU/NfR56GHRw1PfaOePSLYMPg3OYWRzo2HJHLAGstVgDzPGW7JdOmlxFek\nk4/QfnLPypNtfC1OtkxwuVAj4T+W/MV8s2M5iauEMELMr6I1zjtv56v7Lq8q\nRg2xkFuiJJRQTEAOTG6LfMZZwoelkm+coPsTkpI2Vu/tdrfm9FZp33aZenH4\ncqoC\r\n=JHiE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdDl370ujXmjMyA54n6AWG8x0yF93oIb3BdZK8BkkOegIhANktR+px7kORfykHMRO8vsJaUdXEzTwo+ZJSdKosoHfE"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.1-beta.2_1597811751507_0.0580271516844062"},"_hasShrinkwrap":false},"1.0.1-beta.3":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.1-beta.3","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.0.0-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.1-beta.3/build/index.html","gitHead":"48f8c0c333ac7d0d941a7c0693cb191eb58f35e5","_id":"alibabacloud-tdsr-js-sdk@1.0.1-beta.3","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-TGVLlpOHhuw80nGNPpy/dWs16JlnSssn1/gNsFh4BVIHlOHZQWx6xmeox0p0BJO2nRoAF8Lb/LIMxU0lXyExHQ==","shasum":"d22786ce4d817e709c08297259b7d390b6d7359d","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.1-beta.3.tgz","fileCount":90,"unpackedSize":2116100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPLfQCRA9TVsSAnZWagAA8KUP+wa16fmCjtL99TnpqA6f\nm6ehcD5S45uyFY3gCH8zZic5pfpaY5jc4YBlXRUZaiiJHrQSX1bReSkoY136\nTZQCVnO9BcsuGyidbU6n0R8wi5iyw7wK8c4cLWZJQ4mcVEQaw32xziiExMmA\nhgFziDKlUcbpkvERAbmbBabijqS6Kx9RV63HzOJk3LlQmU5HKrkFKyb+20Q4\nsmsZrAZHKXGlzy+q5VbfZvcOfsbd6Wmk1n7TdTlBr6QUtfhdlIUdnfaVjeEQ\n+ZMifYGF6f2jRka8igP36GdU8XUuO8wfqkFpEWzQm+T2UixLLjgiNhKIHvkM\n7iZiU7kouE/QhWfID3e7DaIt70x/MVNBP/yO8/+Df4G4oo7sEIs77nTRsxf1\nH40Zv6fDwxFZ+6hOci70K7ypJ5NZkBx8qY9/pS6/tghRQQdPmo26MuMssxYy\nMUm+eoyeQSGHr6F/Pthrp4vFOfIOa9rjKs0oHhqnnNU/n7C9J65nRmfhAj3s\nE1btSLZMcH6p7qBrThPqdNQGbCExhPrqTY3GaLZhvZtDzk7codfXjZcXFIOn\nOi0Q9Y4k5FVZPkrikCvpPTmEuj9H30iotM5w9hCR8IaUKtTrgNnqfW0gBGkE\nQ+CSXngWMxRC3CGXlaZArq/dZNwr2J8K65Vvz4UNvTvttmoQuov7ZybfUjFn\n+FFx\r\n=Llgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjMrmc/dX6cVzPQSR7Z9o7pnme1PfZ700Rjc0LagHT+AiAZalvab+9JY036HRUUkTm6HR57ZS7qeVdSCq97LaBBAg=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.1-beta.3_1597814735573_0.559257435188834"},"_hasShrinkwrap":false},"1.0.2-beta.1":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.2-beta.1","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.1.0-beta.1","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.2-beta.1/build/index.html","gitHead":"8bdb8f7e505e5ebb40844894185e594a7959f537","_id":"alibabacloud-tdsr-js-sdk@1.0.2-beta.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-pTWI2hyq+YPc7S8mVIRHPq0JpZq1QSYv2H37fDJEtIkzd5+6UVCy9D1FaTjOg0raglrxgPznFVur0b2juglTrg==","shasum":"69ab87a5163d20d90fd2d3e72fffe79acff543a9","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.2-beta.1.tgz","fileCount":90,"unpackedSize":2119231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVfpsCRA9TVsSAnZWagAARYwP/RaUOQEU52PGXdPQJ7yT\nVt97T5X9mcb6m/s6rTPqZD7/ZouWrT8lJjdc6aQwOv949Oznv3tPHYXpgkC/\nEvY55HDI64WgUfX4l3j1QisAsKJxBR0mqnOUVcoxgaGOJNxwcW4m3TNjUYkv\n70Aa8JxjdQ6LIyGenCCL0eXKClcPXM805gAj2z8OM7UILgISBXuZX+ffdqo/\nj0Hk9xMS3LwKgl4aUnf2069v59zO1uW7WCSn0H5pK42/DA5FiIC4Wvuo8AO6\n1FEiq1godyVDwk0vcPQyEMGcuP7fM0T5cuVaT011tVr8tR+0P8fqyncAPc71\nsXRFuAL1zPjrS3vC4GNkn9X3vH+/NOuCzja3cgosb2SFnkI4Fyd8EgG6BbqI\nl667CFV5mbTNN0BXehLjfFmArMBsa7L86BUWO8PNpNNld3RBLb9K14naxvp6\n9EGlc/QQjhgVH/n9kHT4GjEA13yCqqkJL+FW4UqY8y/IwBiGiNUVYwQi80go\nC2aPmXi6MEd3D5zHq+wG2VKHWOI4XNURRXYTTcMN9xlgiEfTHzf1BAgG0Y1r\n9Nm29Czbmr8LbXyhbMviI60dRPxp01x5uqbr/XvkIWwDQL3ZWNDesuvZWnJQ\nJ+Wbd4oIJFVtj+Y35RcWOcBGNf/EqzcCcSbu92eiBIcQLjkL9mgU5tiz75o5\nkoGV\r\n=FWeC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvlyPhzNJ60vSP7+60rs9QaGjy8J4z8KITWg+iKJP2ngIgETliU2ls4acMZOT7UqCl7jDIyBJ0jApI/hsVKdGAfP0="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.2-beta.1_1599470187954_0.12499745193023792"},"_hasShrinkwrap":false},"1.0.2":{"name":"alibabacloud-tdsr-js-sdk","version":"1.0.2","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.1.0-beta.1","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.0.2/build/index.html","gitHead":"8bdb8f7e505e5ebb40844894185e594a7959f537","_id":"alibabacloud-tdsr-js-sdk@1.0.2","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-6By6eH4Z3ydUMfB3j2q/LPT3/5Tx8UvigPQ39DP/AEsccpfb5yKIXQ9gEBPqviVOw+4Q8v2sUIjkVX7KDdVX4w==","shasum":"622783247277bffdd4a5be753921078f3b2b9b40","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.0.2.tgz","fileCount":90,"unpackedSize":2119824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVft0CRA9TVsSAnZWagAAOUQP/AtKAvs1Sy1X6SODkE4q\nCLLzICIVBcV2zIMOEnWLQPPEJUU1p7yhuZG1gSNqqO4cacyWXWNvNnnohy4g\njh/AKeA2daYORY8Mt7R8UFEg55miGsAhYNjSLujWfI2SCbnincL7oRg4WBvY\noqkrRY+1iGmIwoZuYCiyp/kfZIEBnJ4z6dU1R/NGHkTsya5Cewn3oa0/Nxq0\nF7lLOT6w767HidyoTHi2lZ0oatj3NJ0clwMvbW1UxwlYsN6Ew/KoTD7w4jQL\nvGCXJW1wT7IcinhivqFR5FmA40gmzuMpmZEx50M7BVH+DG/EDineFTNMrxna\nEOeckMjLaODlp4Qs8rwJ10A0/mbTDSN+g0LSGWYzMiBtXFT5fbzxYNTQ+V6P\nhgtySEjElvDiCh/7Sz9U5DRlXg9WqW0UhTiESl4dJccZonk7HH8E1kb48J7z\n2Y8bTBMpzakTQYW6WjYT02zM5zlb8A/2aoSt3UAH2+QB7e4eKhKOEgN6b3d6\nWxLYfGpHw8k/xE1I79tqTDiYxZmJd8cd0IAr1aBTu4xmMk/S66QnoBYHjFp6\nin8SZBVwkh6iZNVACh8VsWZgBP6ooIRZkAlQQmym+YJ8aADmYClQseJm5R5A\n4wwcsxR93W2AMR9WvbMdtX8ZoySQd8M01ahltdELnkkxZnQ3JhF0KiKIr7sA\nOBb/\r\n=s83f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRadO57FsI9vwJMmWWZCFB+jK28mcwWxzbj7qQTPeaIAiAlXHsA0HnSSc8Mr5kg5Vj3+6O1HoMvbTnBUBorPyNb5g=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.0.2_1599470451466_0.4417482295333195"},"_hasShrinkwrap":false},"1.1.0-beta.1":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.1","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.5","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.1/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n   - hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂不支持三维空间旋转\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n1. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n1. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"f65f644ec820fbc2f2e29e2cc2148279888dbaab","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4iQpwUp8HMIYE2IQghd4i3IUUnPBoBVdcrgtCNWqYETULFb+X/66BBvtcLeNb8LYNK6DdCsVDHRQkOjoCd3oHA==","shasum":"8d6722eb25e2c1c00f8618c2cd43c4a81d25fc0e","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.1.tgz","fileCount":89,"unpackedSize":2112479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXzguCRA9TVsSAnZWagAAxVkP/3I9TyVE11djh4PGrZyP\noc6KWsse7MuZB7lxNsvZYNqgpjFEec/8qyaCKATjpHsgWPGICF1pYva3EE/G\ncPA/9HMxshbEyYzQSrwgBnywnRDntVM9uK7+GmVm9juAO4wFTQ11gn7GQYP4\nV/jcSHdb927xFM+kgmRC/jqdcu6/DA32R2KHCbB2+6jFg2auE8KpEBwwLi+J\nRbbG4APtXCedQ+WX0YttpGmGU53ACU/j7T8/J/ObG4GwJPYC5T+R/DXhhHvI\nZyucsNmf+zZQ5+szlocIDkVCbz3vxENOR/9cn2lLlrue1JqunNimgQWpLmfl\nh1CmEQBBp0Eiv3i0dFS7mGeSc6KcYbVJT+fHpp1IkMpddh75vFR7v5dqx8W2\nx5OHKtPs4lKHWrp0zTVHIjT6YKJxh1NdEjbx66CRO2FlB5AfhXHaMj6p6eQK\nVxYYMpjlIHKCQI7hzfYNIapmL1cEaeVzbuuc62ohiuybXkQ8ODnHWZk2PVAO\n0eZpSFj20LXkoTVYMwJm+hmURQDrmMs2ZO3gV6ahCPXzJYUKxpThGAz0hyWi\n/KKEkw/Jtjp8Y/FHuwPJ6JuF2zpmBAmwc7m+AjhIkevXi7YnaH9XV8AiD/YL\nZ95k4F8yz2QEYw0KTu/0649bBYy5StNDqWjRlF716bQfvAzdbxuMcXLilwIi\nHkB1\r\n=KxrZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL0sKy0j9Pf1D1f0DtlJMHPgAMdroX4DZGXlEHXZl1rAIhAN/M3jx4l4/IlAcqPEc8QQJbko6InV1pm3YKgbOexZAo"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.1_1600075822248_0.39115917844916437"},"_hasShrinkwrap":false},"1.1.0-beta.2":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.2","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.6","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.2/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n   - hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂不支持三维空间旋转\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n1. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n1. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"de95977c6ef30f190f8aeae7ee8ee0c820e743c6","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.2","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-G8Exmo6IoFnSt6FSPJVukXXHKgu8XzalQsJSbvQRA4m7d9uLNYruuUTCHkAZ+VFtf+3vnQAgXDDDuweSOs0VhQ==","shasum":"78cfffdb740d83770cb013e3ec4291a7b6f828c9","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.2.tgz","fileCount":89,"unpackedSize":2112488,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY4YuCRA9TVsSAnZWagAA3mIQAIA5xZLimi7RITwMjro7\n/meulFchRf1JF0cdsAITZZazr3BYGUpOAa1kUYDjxNsGaz5WGcsUo13PPH0E\nP9IiABEmC7FDd5KN0VeYdFEG688DxMUPeuX+yMyeOIxD21DHJHQCemgW4Otw\nE+VNG7q2UBoSxLDhzEWVMcAcXNkyjKDKkSS6iuR/VUVa91H3+iEzi8FFKoGW\n8zrUPsJ//rYZWME5p/syUQCbcY9EmkphGNL7PDajPewqZQwdifVXJd0uGJkm\nkPNSRx4E9QA2rLQGbzMQvtxh3eF2kNC+11In8ddyWkuROEFInQA6rascDlDz\nsrb3K7bK0yiqKW6hioBJJjzHnd34W0KaSGEpk5yIbwW5glrsNcWk9j+X4jgy\nkOUIRr3Iuc++lVcHUHX+v8MH8xj4hB8KMQAlSAhwdJdzn6cUScFUK7coLsdd\n0pC6wnbMUwcw/X7ZbocPVQONj0UFqB67MFNNGJgoOtNZekQTaOJFw7BIuK3Y\nmElmr8Tpcnk3aKQ+pgiSNMc/WRtrbjA/xVHkYmYoE1F20aNyM62wWQFIA1MH\nuXL7iTRuYR4nltVomKaaHiED6F3eEx7p8TokiGySgBDQI6dv5ggSa7blK25/\ngAU2A90lHgEeKqauPtxA4uGXTyPFGVSEFbVC18lPvXHphjD8wojCYCaz3q7F\nV65r\r\n=C61f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/7++jbR/k5BQllCLgPqh3lSNViforG/zOK7xB6uyO3AiAdR9ixC4FtO2ErmYJfjHzOi9CE2W5mWDR2y974iSDoAw=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.2_1600357934482_0.21454301322403047"},"_hasShrinkwrap":false},"1.1.0-beta.3":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.3","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.7","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.3/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n   - hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂不支持三维空间旋转\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n1. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n1. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"424907e6265f38e26a33454c7f8c8a4c4110c645","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.3","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-UrIri7lpxMBkPaxAW00TbxWNdHBSVzw/2tiKdgItzCLjl4l3h255CbsfR+zttdCco/d3cZb5DuYXjENaZjsbWA==","shasum":"e3033ee9dbe6c558cfd96fa57b90856c868caf1d","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.3.tgz","fileCount":89,"unpackedSize":2112498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfZFecCRA9TVsSAnZWagAABxwQAIpuxx0ztWz89oSIEkoX\npXuUMnI6XJYFd2KHbofIhN3WmdUT02EJERQsASnx2La/eHK/fn2YrtNBaco0\nBdlbAc601Y8m3krIMRl+Sk90p4UbyK/Tb39sltBK7FUtrx4ULbdl8NjZlWif\nTOqLbTIRW7ekRSJh1/rwxeoIDPuIH2khiihGr90znemSz7TFxDfV8DK9yU9l\ncA8DdqF9kjR6I8OWGJr/M0as38NV36QiDq8dBfomq62FioOPHedgfOQqgaUv\nwwm3hhfSToLW8bq6EkxrpzeyMGCyzlNaILf/J0IxRF/5VpQf9+UucH04Yu/M\nNZaGQz4hlDq9CbxC17e/rkOYE0x3qChxif5sRFZeouay3uCS7tvI/YkAZ4kr\nLh7wMi61kKvdFmu/96zglFQSEfeC32ltkCzWaZ/XMlgf/x57+NiNm6tfLv3y\nN5KxDIp4oNH0fY9FFUuTOE4DPC4am9tE6uaa9+YzvMqPprqYHcVlqYGd2+D5\nGoxnt6+3dQgsN6aDCUvEONwoh/gUqZAZpgtByhqTWofvIrE0qA2lFnIFUNNW\n1eLJlPDFYF36H80vtDY1MQ/lFUV2yWA4mZGD2vPQhpfkTwqLC0I26dSBXony\nIjVKO/Xec/Y2VHaWLuDv+gAKklnH5reSXK3jkfzZ+dkGp1aPUH3BUuW+8Vpn\nOYft\r\n=y8kH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHK7F9UwcSaATurOfub2XPaheVdg7cTZ8ETeUaL2er8bAiEAhAykqggFDA/jVBG/FBPbIYMRnGPJgUR2OAh7SAgqfpk="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.3_1600411547934_0.3246024909013623"},"_hasShrinkwrap":false},"1.1.0-beta.4":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.4","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.7","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.4/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n   - hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂不支持三维空间旋转\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n1. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n1. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"0e0fe17e95a34b9e70728eb6564f8392ff948bca","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.4","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ABqmyrImfJlKzIIYG2YaZ6fQbDFD906CTaLddoIdbYM1sUZZe4Wx8PGMKtOfoybHsN965/g7k4kIPJuGPO2SaA==","shasum":"f9ea7820431688de0e295648a8be13d52920ae4c","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.4.tgz","fileCount":89,"unpackedSize":2121740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaIjnCRA9TVsSAnZWagAA+k8QAJqHqXbs+z5XG/Y0dEUe\nokMZdaVjRlDrtScOloXfOb4eOrQnwlv6aKgkMOQ20bdkZGLG9v8/IS6fQgz/\nt/U+9ugv3R9c92u8/HNY/fOwzIKRT6k8j9kuVW43q/wGfZreClPhguYTB5Ll\nii0GAXutyjexGURbN4ll8uGE0nbvaJa5xev9BIisBmXZkMEXvVLLrcSGQv1J\nydTJG6g8fv8K7dB+0C4h9c7x884o/KSRsCbV+acoRYSnnVV7STqZXeUySO+0\ndInavptwAWUYoRDp8bbj+ixWJgXF1ESpRGleLzPwFcsNq4n84PmR9t+k9lcy\nadmjj1iS4fqHNj8sv7BJmLXbVM4yl/TqR762ZOuG33XjKPw9jzAG2OZUCbTD\nFgiGuAMTtCirs69gvM8LV0wK9LeLnICAZoLTCT6l/AStJYqm2V/UasccWSkO\ndr6Yn4fGAod+rQ9f534UQK1Ac6YMK24UZpe0l1vMQTN5XIGibSzQvyWo+QkG\nsvDDLXkjJRE5fP724NW1wHAQFs+jqpwirOT6qBkX3J1LGZvrJmXTeoJvBS7L\n5Eu/gbK91N8zDfbU23LFQsvlPduz0Qc3tf8SOmgoEImbYrL8rgQnaDXT8Ala\n7PoiT/spmVn34Rfgp+yq7SRtjX/a7YNcqumpG0XSziGNHcIu3OYs77bZDCpG\nrfj+\r\n=pAEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9TGsanMCMmVb3FuRUwsAOVTa/kzG/pBI7BwWRW45tbQIgUF5GQS6xMayZOR0tDkbDlFgBJWF1NRKv+kgumQo6zlY="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.4_1600686311385_0.06784167726864987"},"_hasShrinkwrap":false},"1.1.0-beta.5":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.5","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.8","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.5/build/index.html","gitHead":"cf4f3a52bd8ecaea730bebea9bed538c5e2647b0","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.5","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Wt/OmRGd3t9h4rPXop1qjV/wfnb16Ph20RXg6JJYA+AnOn0xKFe7bVFbHjTYZzDSfyTEn6QNyFps5mWttWaCWA==","shasum":"9474f0096ef693f6d6a55644da2d95bb6861b7e4","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.5.tgz","fileCount":89,"unpackedSize":2121765,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaZllCRA9TVsSAnZWagAAUqEP/2VVgPuCQT2Xt07wHNrI\nJ75Lsbvp7Yp2dPiS8w7Z0k7gaW4KjiEnZkKOOdZby/jAKwIWf5aFczm7bXw3\ncx3ZLGOqnBdels1mXfra/3cx7haLyqqapk85qY+gcFb56mAmX2Ig2KkSnrDL\n2yZx29qL4OhicFH/o5cb93kDAbsl7JU1rYa+F1/mTnzdohnXT3cek3W088cx\nhm+VOIQOwM11w9HdynrTPZMMg3axwZ8l6FDq5BvSz8esI1iaP4J/4GMVYSSl\nDEjlWZ2hlJe9wKoz6m9nS/iD0aCLbPPOysybPJCWQoHyJPe5Fq/WN3jtIQqO\naZai3lQLdQPZuIp62MxjFgW7ivmdwcmnyWdBs7sJZl5k611EqcJujF/7c8g3\nPY18KeMv3l3lgUzmT/pu96cnxnSA0dDH7ej3CTEn/YAoob/74nAWSbZC/thT\nnsWICC+cokIYhweFPrVyh1197kLESgAQYo1kVIIXTbegKpOqCyquRVTAONOo\nrum69Mgf5pOFkxZW5qnhZS0uDIHndx9ZsrU2SannJbDaeifmC9XrROODxn9g\nWswAN06q2uVc3ubKtHyXad4HV13rjKiQVfQSgElivq+Aerzshb7PpHPsSjEK\ntzUePdb+KMe/ws5/oNAzybI7dndvCK6rCFMrlq2hfirMIH5v1fUehUrvSCLi\nVSt1\r\n=CXGR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPkfexL38zS4y16eok8XFFfSJDLdg1YWmuH9jamLL4vAiBVtx8bT1yoywk8tyEkuhMkqXj76BG1JvRLF9bM3mdKbA=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.5_1600756068870_0.32011854815224505"},"_hasShrinkwrap":false},"1.1.0-beta.6":{"name":"alibabacloud-tdsr-js-sdk","version":"1.1.0-beta.6","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.0-beta.9","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.1.0-beta.6/build/index.html","readme":"# 三维重建(临云镜)SDK使用文档\n\n<a name=\"2sJRt\"></a>\n### 1. 背景介绍\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、以及标签标注能力。整个SDK分为PanoramaScenePlayer和PanoramaSceneEdtior两部分：\n\n- PanoramaScenePlayer提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n- PanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n\n该SDK与框架无关，您可在React框架中使用，也可嵌入到Angular\\Vue等任何框架中使用。本文档将以嵌入React的方式演示如何利用该SDK加载三维模型以及如何与三维模型进行交互<br />\n\n<a name=\"2EkzJ\"></a>\n### 2. 关键术语\n\n- 模型:   用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过3D交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK提供的API的操作实现场景间切换从而实现场景漫游\n- 标签：SDK允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，图像，文本，链接。\n\n\n\n<a name=\"bugpd\"></a>\n### 3. 快速上手\n<a name=\"4GPuR\"></a>\n#### 3.1 PanoramaScenePlayer 快速上手\n\n1. 初始化PlayerService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: 'Online', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n```\n\n3. 模型加载\n```jsx\nawait player.load(token);\n```\n基于React的完整代码如下：\n```jsx\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport { PanoramaScenePlayer, PanoramaScenePlayerService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction usePlayer(token, target) {\n  const init = async () => {\n    const service = new PanoramaScenePlayerService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n    const player = new PanoramaScenePlayer(target.current, {\n      service: service,\n      mode: '1', // 如果想预览未发布的Tag, mode设置未Preview\n    });\n    await player.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Player(props) {\n  const token = '58b51071d0a446318607443bd2135d74';\n  const target = React.useRef();\n  usePlayer(token, target);\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div ref={target} style={style} />\n  );\n}\n\nReactDOM.render((\n  <Player />\n), mountNode);\n```\n<a name=\"8nuUK\"></a>\n#### 3.2 PanoramaScenePlayer\n\n1. 初始化PanoramaSceneEditorService对象,  该对象封装了前后端通信的能力，详见下一章节 。这里在快速上手模块，我们先使用Mock Data能力测试\n```jsx\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n2. 初始化播放器对象\n```jsx\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n```\n\n3. 模型加载\n```jsx\nawait editor.load(token);\n```\n基于React的完整代码如下：\n```typescript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport merge from 'lodash/merge';\n\nimport { PanoramaSceneEditor, PanoramaSceneEditorService, utils, DefaultSceneData } from 'alibabacloud-tdsr-js-sdk';\n\n/**\n * 加载模型\n * @param {string} token\n * @param {HTMLDivElement} target\n */\nfunction useEditor(token, target) {\n  const init = async () => {\n    const service = new PanoramaSceneEditorService();\n    service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n    const editor = new PanoramaSceneEditor(target.current, {\n      service,\n      autoSave: false,\n    });\n\n    await editor.load(token);\n  };\n  React.useEffect(() => {\n    init();\n  }, [token]);\n}\n\nfunction Editor(props) {\n  const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n  const target = React.useRef();\n  useEditor(token, target)\n  const style = {\n    width: '100%',\n    height: 450,\n    position: 'relative'\n  };\n  return (\n    <div>\n      <div ref={target} style={style} />\n    </div>\n  );\n}\n\nReactDOM.render((\n  <Editor />\n), mountNode);\n```\n<a name=\"nHH2C\"></a>\n### 4. 通信\nSDK需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过Open API的方式开放给业务方，业务方可以通过Open API SDK方式与这些接口进行交互，并通过WEB API方式转发给WEB端的播放器。播放器通过转发后的API实现三维重建服务端通信, 又能保证其安全性，以及各平台兼容性。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService对象封装了通信能力，开发者可以通过 `const service = new PanoramaSceneEditorService();`  和  ``const service = new PanoramaSceneEditorService(); `的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试，PanoramaScenePlayerService、PanoramaSceneEditorService提供了Mock数据的能力，开发者在开发前期可以通过如下的方式加载Mock数据进行本地开发\n```jsx\nservice.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异，PanoramaScenePlayerService、PanoramaSceneEditorService开发了协议转换的能力，用户可以通过registerHook接口进行协议转换。比如以下Code给URL增加前缀，同时对返回结果进行适配\n```jsx\nservice.registerHook({\n\tasync request(method, url, data, header) {\n    const prefix = '/biz'\n    return [`${prefix}${url}`, data, header];\n  },\n  async response(result, context) {\n    return {\n      code: result.errorCode,\n      success: result.errorCode == 0,\n      message: result.errorMessage,\n      data: result.data\n  }\n});\n```\n具体接口参数参考 /documents/interfaces/_services_basicpanoramasceneservice_.hook.md<br />\n\n<a name=\"SCUdR\"></a>\n### 5. Panorama Scene Player\nPanoramaScenePlayer对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）\n<a name=\"lhxqr\"></a>\n#### 5.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - mode: Player的模式，支持 Preview = '2',  Online = '1', 其中Preview加载已经创建，但是还没有发布的标签和已经发布的标签；Online只会加载已经发布的标签\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"kp2kS\"></a>\n#### 5.2 Load/Unload\n```typescript\nasync load(previewToken: string) \n```\n加载模型，previewToken为模型的唯一标示，可以通过OPEN API提供的接口获得，详见后端SDK\n```typescript\n async unload()\n```\n卸载模型\n<a name=\"vuOcu\"></a>\n#### 5.3 事件\n\n1. 注册播放器事件\n```typescript\nregisterSceneHook(hooks: IBasicPanoramaScenePlayerHooks) \n```\n\n   - hooks.onLoad:   `() => void;`   加载完成事件\n   - hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D模式事件\n   - hooks.onChangePanorama: `(panoId: string) => void; `  切换子场景事件\n   - hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂不支持三维空间旋转\n2. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaScenePlayerTagHooks)\n```\n   - hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n   - hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;` 触发标签位置更新事件\n\n<a name=\"XDJk6\"></a>\n#### 5.4 API\n1. `player.getTagList()` 获得所有标签\n1. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n1. `player.getPanoramaList()` 获得所有子场景\n1. `player.changeView(view)` 切换视图，支持DollHouse(3D模式)\\Panorama(全景模式),\n1. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n1. `player.hideTag()`  隐藏标签\n1. `player.showTag()` 显示标签\n1. `player.flyToTag(tagId)` 跳转到指定标签位置\n1. `player.getTagClientPosition(tagId)` 获得Tag的屏幕坐标\n1. `player.getCurrentPanorama()` 获得当前子场景，若在Dollhouse(3D)模式下，返回为undefined\n1. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n1. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n1. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n<a name=\"kqk65\"></a>\n### 6. Panorama Scene Editor\nPanoramaSceneEditor继承了PanoramaScenePlayer对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以跟进API进行标签创建、标签删除、标签修改等操作。\n<a name=\"7R1xe\"></a>\n#### 6.1 Constructor\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig) \n```\n\n- target: Player的DOM容器\n- config\n   - service: 前后端通信对象，见 4. 通信 章节内容\n   - autoSave: 是否自动保存TAG, 若autoSave为true,  模型创建、模型取消选中、模型更新、模型拖拽、\n   - view:  DollHouse(3D模式)\\Panorama(全景模式), 默认为DollHouse模式\n<a name=\"ZdoS9\"></a>\n#### 6.2 Load/UnLoad\n见 5.2<br />\n\n<a name=\"teqVI\"></a>\n#### 6.3 事件\n\n1. 注册播放器事件见 5.3.1 注册播放器事件\n1. 注册标签事件\n```typescript\nregisterTagHook(hooks: IPanoramaSceneEditorTagHooks) \n```\n\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;` 标签取消选中事件\n- hooks.onCreating: ` () => ICombinedTag;` 创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;` 标签创建完成事件\n- hooks.onUpdatePositions: ` (tag: ICombinedTagWithScenePosition[]) => void;` 标签位置更新事件\n- hooks.onDragStart: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragStop: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: ` (tag: ICombinedTag) => void;` 标签拖拽事件\n\n\n\n<a name=\"VPTdd\"></a>\n#### 6.4 API\nPanoramaSceneEditor继承了PanoramaScenePlayer所有API除此之外，PanoramaSceneEditor还提供了跟标签编辑有关的API\n\n- 6.4.1 创建标签\n   - 通过注册onCreating事件回填标签内容\n```typescript\neditor.registerTagHook({\n\t onCreating: () => {\n     const tag = {\n      type: \"IMAGE\",\n        config: {\n          backgroundColor: \"#000\",\n          images: [\n            \"http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png\",\n          ],\n          title: \"60152892558\",\n          formSelectImgType: \"mural\",\n        },\n      };\n      return tag;\n    }, // 右箭创建标签\n});\n```\n\n   - 通过 `createTagInView(position?: { x: number, y: number }) ` 接口创建标签，默认在视口中心创建\n```typescript\neditor.createTagInView()\n```\n\n   - 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n```typescript\neditor.setState(EnumIPanoramaSceneEditorState.ROMA) //漫游, 默认状态，允许用户进行场景漫游，场景旋转等操作\neditor.setState(EnumIPanoramaSceneEditorState.EDIT) // 编辑, 允许用户创建TAG\nconst state = editor.getState() // 获得当前播放器状态\n```\n\n- 6.4.2 更新标签\n```typescript\neditor.updateTag(tagId, tag)\n```\n\n- 6.4.3 选中标签\n```typescript\neditor.selectTag(tagId)\n```\n\n- 6.4.4 删除标签\n```typescript\neditor.deleteTag(tagId)\n```\n\n- 6.4.5 保存标签\n\n当开启了autoSave模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保存，否则就需要调用 `save()` 手动触发保存。保存后的标签可以在PanoramaScenePlayer的Preiview模式查看，但是不能Online模式查看\n```typescript\neditor.save()\n```\n\n- 6.4.6  发布标签\n\n发布后的标签既可以在PanoramaScenePlayer的Preiview模式查看，又可以在Online模式查看\n```typescript\neditor.publish()\n```\n<a name=\"0RstG\"></a>\n### \n<a name=\"pwBUr\"></a>\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag接口会触发页面闪动问题\n","readmeFilename":"README.md","gitHead":"2cd31cfd9753f25af305d045a9d3a82d3c81b2a3","_id":"alibabacloud-tdsr-js-sdk@1.1.0-beta.6","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-plfeIX2PxvZo5JjH9F58JcFWhagurfRYCBoMBnmzRoi+CPiXtJhhg4feKkLMVnjaLDxIhmg/sNjONZIC+0t+XA==","shasum":"86c12b24c6509a05994a2279d488af93bb8c6c6b","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.1.0-beta.6.tgz","fileCount":89,"unpackedSize":2121774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaah8CRA9TVsSAnZWagAAcXIP/1PZIyalEx847WdtXEbC\nSszAKr4waFaVN4HB44rllTO+pPUmABIHoLU4+0hJxVjamBWFO4RHJYIbIQ2k\nJdbjU3VFicWkiXBB3Tseyc+pI0yi0NFIbfQJWIufQIf3xnR1RWjjwoMMOxAi\nMPkJCo+hTALN/TnWestxN34yEnAcEoLCS5WFLFCIds58GPmYMCPp/BFWcPyC\n5blO+iqDC3CaJ8DKxgB6+I79/KIrFeSulagTkpNIpZj1qGS5z6dKBBOUwC7a\n3NthwbkvzQ2smFOqpJRaCIAOV4TMNQPaeGLmpw2cKjangtB2Cvwt/Q5lJPpb\nruzgOiEdlYoeYBqRmkU5dkvlwbMmfHPr3wik76ZIbJ7yYwqwoUy56b6VCIak\nO41XjIMpNrHhJq4x3Y5vJStMP9z1ISxWKokeWkksUeWLf1xt59yV41gaab86\nOeb9h70qCOlR2e7IxPDe6FuU93U3vFsH3fg3zKA7nMAwET02ywD3kguRkwZv\nvn+EY6/sH4OoIQ3smjOmzkrNP7oRDu+lrXWtP90oDpDqodBoRvycolNdqodd\n4p+mspaBMa5dXIGxLDu9XXYU224z3xpzJSGJC1YKoYkqUKyE3FxCMYZJpRqZ\nOWBetBmPkx1iYJGTZdJGDCaYBpxzYYGxD1slT83yyvB270XGumiKYlspgOTK\n6GeR\r\n=0Tvk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+vgb2am4SCtuSJoCKIS1sDGaAHmP+c2aE8nCi2WOHcQIhAMxHbrura6uIFRBkSoFA8ulJttSe2JfE/pxHtD0D4Pr8"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.1.0-beta.6_1600759932476_0.4363429981451994"},"_hasShrinkwrap":false},"1.2.0":{"name":"alibabacloud-tdsr-js-sdk","version":"1.2.0","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.2-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.0/build/index.html","gitHead":"b73ff70589c87c8e057c849477c56c871027159f","_id":"alibabacloud-tdsr-js-sdk@1.2.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-S3iYjBQP9cDlcM3TFKN1lT6Sa4tURaFe8WRn/Ky6dkMRd/zlddlSkdN2aZJcs+BvFw2biXpjipmbQ8BmedHLDw==","shasum":"3933fe152455a49a62bd13a7f850bf075822dfc6","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.2.0.tgz","fileCount":89,"unpackedSize":2124501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhXWVCRA9TVsSAnZWagAAvvcP/3VhjKB01L57HK2hcdbk\n80xob7iO2U3/4Aev15YxMktnCV6E2D/atzfWZSHuvQt0WIFf21/tngMKzy0D\nmU6M29G78Zopx1vu51fgD0/BnAu+5Q7nZT4rA5S0KNiI0NAJDe457c9HGHhN\n+fDMIbCBIH+0kAFKky/8pnmJhx0aR5DtXPyX9xX4UDWWhjWwCqyiHi8N8FH9\n1lekP/k5UT36ZY6w4D1tXHHzyuQp6DcYd9nUYe9sEzBjE2A0O8yiLFQDAdBM\ninlVmOo83iuEoyF6fdDeoDVWCUeW8VFsVz8pNMZ60M9DjUixs9vSr2ftfdZD\nLl90xlOH+iaq9hectAd1UB+0DXvlSvG4ALN9AxAXZRBLsOPcZzJML7yNY9ZO\nispZbCR1qI2WxuxJ0D1TYBEb6zRl8J7sMkrr66RF0EGLI6PuteSeXQKkCwA9\nCWvQtVxfoXbrg9MIJZIrMpjay1g/8eDEDZcrH08+XZBB/FvkaOmcAd/YZfgN\nB5cqq/x9ExOebMnazBTMKkNq70YctmktFd7eWUixybAJHlo8Ju8N7Xx8pfCn\nhCRosw0D67Y3CBnqLtQ97UVx1McH+1iW97PhpL1nqnR1OmiLTpqQHuPobpRh\nHmTIiH81RVPPXj3K0/f+PRxBAROPDxJGW3ReWkbmJMs1vym+8gGkLtsRcarC\nFA5l\r\n=di8F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBe/HXF54X/w8YrRCxMFf/obeq47Ulc3stIV2c5QEcYAIgU6Lk0ACX5/HV3L3Sp6TEUTqXJM0PSHMlVeZqxIl21G0="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.2.0_1602581908837_0.557256423540599"},"_hasShrinkwrap":false},"1.2.1":{"name":"alibabacloud-tdsr-js-sdk","version":"1.2.1","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.2-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.1/build/index.html","gitHead":"d0ddb40fba9a0c22803585182ec7c4bac4d1050d","_id":"alibabacloud-tdsr-js-sdk@1.2.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-quOHt7Q3RqA2lcaa+ZvKSnKLKB3Ocy9/ODTzqcTGbb/GmBsyKLhLQyeDiyb5nTmR0aZkKFul0JXrftrQj6HgxQ==","shasum":"9ec0d5cd3e62b85be87851b514156dd34f302d5c","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.2.1.tgz","fileCount":89,"unpackedSize":2127197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfm7KQCRA9TVsSAnZWagAAmbQP/0/DdacwDrhJw0cP94sI\n2K1+WLEaBtQFRdIujD2Tuh8eBxX5U5jXAKXPzZFZRcBrCFxXeaCvw3WRX2qO\n/dYjURUquCPltFGgyl0daolCALALZYTc5yUdSwj4HVQxDOq85QJDSHJd1kwC\naDXBQAaowdB2HAWkzHbLEtKAL7NWk77Isgd6CJE5oHISpfVt25tHRxxelqq8\nxziWch0fFYTZW0u4afNFsykId0GRaBvQ4xhGoHt0DjbKJObH2MNpjiYfvyPz\nMHo++3BXTJEtVpQMsh9O1rlcxjEMHfcoLQjHj3F38tjUVosr0N6oYavUaf8I\nEsfGuByQd1Yvh3bOg7eBEvTsBi5aDsenQ/pR7Pxyx1dt3Gqo4tPu+TjbogL7\nNNvYvrOcXm9mQFB0VowVkFhv0Qds5JimrEHoe/MTaQUsq2AxQFie3rKNO3l3\nRNrXfT41dfneZa1B55tVQIeo3MGlKGKbocZOUSbDgoLDz3rn3tYP6xAyC438\nIVG7NtGCYMr2R0+KkTOR9I6VEGNCSY3mHKgNcCbE42G3/g82MW//TES1zjsZ\nlZD1K759MOQWkwE1LaYBUxLZQBdUT8hJpKVulmPeOoAKMeVRuRpRgKEhepgi\nylReCh9yic94CS5Xx0ksL/qyxfaBYCplKsNf0r2gCETvvkbvf0p2Tj5ZvdWT\nMAYd\r\n=3KSE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBouDzggnz8ZVB1r2qHlukXiyjxRZusrDp3BVEQSE0uQAiB2zretfxcqYP0zBZX9SosElooPFgrfZYwS8BkDkSXVhQ=="}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.2.1_1604039311532_0.8295655381388236"},"_hasShrinkwrap":false},"1.2.2":{"name":"alibabacloud-tdsr-js-sdk","version":"1.2.2","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.2-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.2/build/index.html","gitHead":"35a3b6330403163345c56ef708ba5b5208ae9aa5","_id":"alibabacloud-tdsr-js-sdk@1.2.2","_nodeVersion":"12.17.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-4MAG3qFDDD2qAaYPv3IUJsfgcyFmZWzoZNgiWnshaMfVblm58rUz0nO3P71VFOvIr4cZ9JXAi9e54YZ5TFH1Sw==","shasum":"1ac2c37b63df9dd8bf6af602153fe6aef1528768","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.2.2.tgz","fileCount":89,"unpackedSize":2128243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnVHUCRA9TVsSAnZWagAALLoQAJ98gkcLw+RoKwCSGnn1\n/fzapc3fZt/Ed3UA8P4DW+BRChRJbUvSQ24LE9hqneDK0G17FH9X3MvkmC8c\nnT/iIPCzgQOCl1wbhBpNy+HPD0ie2VaO+PdJLMhVFHGT1j3Gfk+PoBMznBSZ\nUHca+qo3UBGUEawDT26/9hPyfxf2ZlTyKJnKGT/ISnOcl6EDSdfNfN0NRf9n\n6+s11ggrDiCKq8ln1elYN4U4nRkMdMCIAcNMXPsALrHo5N2t9gSI3rF4Rk2Y\nAFpN+g+f+ZtJdBP3ane+bsM2cPGfKq6x2l8O7K/Ju2GGOBDPCDRBEL/1ttVM\nxmF0TQvHwBqsBE9Fozqzx+3R6aPnUcAl+Vu1TWJ5b3Bzaj4DwqTaRtyFuW98\nmtV4cso4NIaPuD73JQ1W7JNsmYmrhEtTUPYTPvf/XbMc4Ip9qfRIhncKJ+/6\nSvK18WvLH5xvVvaBBP08LsGQLOh2cRQxkL6QpCekCGk0vmIbQRgEYCngS2gi\nTW3sxaaD1+sFJSeJ2uPTJjagtGlIFkQ3uPeNiu+DVMLyXJ4cSHKHYy6XthXX\nSS4Xev2peWYdKT2qUPn7jQU5RTHGPu6CeKj2J8na+i4D2DORQBXvPMeWm7UJ\nIdLOJJIXf0d0QEE4yBATTttoHDiX9UHUzcdm50iPYPjyODW1kPUvxhdqT501\nzUrX\r\n=7nTe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnwhJE9LDaNoZgqeppewtXLGtikoetuexMMUJXNHTWIgIhAO0YyET042FoOVovXDvZ2CX6h4xxtaH7HoQ0YVLeTRG4"}]},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"}],"_npmUser":{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.2.2_1604145619954_0.5635766244516407"},"_hasShrinkwrap":false},"1.2.3":{"name":"alibabacloud-tdsr-js-sdk","version":"1.2.3","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.2-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.3/build/index.html","gitHead":"fb9c9e3dd43c1ff37feed038193fd3d8aa4848b1","_id":"alibabacloud-tdsr-js-sdk@1.2.3","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-oWIXUyviQNBwkemTucDEaoLyEY/DnVTC/qKdZ2LGblXG6jC3Usb/zbS/YC13z5Q5EGmqFemJZ2C6XpgJcb82KA==","shasum":"dd8daa4d9d7d3f397d01091051fdb4715eecf285","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.2.3.tgz","fileCount":89,"unpackedSize":2243075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWu5YCRA9TVsSAnZWagAAWJUQAJDIJAwG40YPsYp6hH+Y\nQvZflSWl1HKHpxnUSUEYdKL3oPqcXWGdoA3SarrB3fMjLumINNv5aBpa64Ac\n4fErp/wPhnqvU9jkCu9OyNYWwi6fiKFHQpbA14g0YjhpaQRKNciP/58Noz8q\nCRAAFsZO3uNF0Z8uLkHFhoxabk7yDxdRo7K7rgzEH6q0oYW4Opzn9TES/eOt\nMH7FI4niqcnPig9QOE8DI1XV9nUprqv8e7k2n5eib5Y76/lRFafzK88vvJf3\nxj1o4ipyEyzx3uMzcgM44GIAHuVmqwHk3RLHBuhhP0OOa/YTzu3WGiVK0HGc\nEg6I1G7sx80z5rJLNh2mrnPEVCNY/qLe7q654WucXor9r5QYNVsHgyxw/qX+\n6wWO0p2Ki7rjCIs19a6Qu9Azl2rkZ/WcTDKraVBO+1XavzxTHowrjggr+CFy\nNsFFyZw1o/7RbQze5+HK//M4bvKeYHVFmJd8ci0W7X4tD2Pyow4fKMur5t6d\ntmcfCIbPz+1e/smFLQ1fGSEvgjSPfNuV5Z/t/2NvStmQ8j/jk5BhJ/xdDzy7\nCVKVMbA9eo2KiEXYIEWFVKLF8hBIBjfvnK4NAtYuMrTtXFvWxxUtb75Na7Ij\nBgDHK2RUuHcQe330/Xp8ui/A6A/+8Ar+GQJ/d9VdZZPnrLIFxlB7ELjymt2r\nWecI\r\n=d9Ol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiXatJQgiN6762EKp7mSg8pM4TuRhtQhh/AZUWDEoI0gIgZn7G4i5Y+elzFrcKIvOCwIJia5VP80Xx/XlZ/pZ/nGA="}]},"_npmUser":{"name":"yaohuang","email":"huangtt.work@gmail.com"},"directories":{},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},{"name":"yaohuang","email":"huangtt.work@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.2.3_1616571992489_0.11586046522447901"},"_hasShrinkwrap":false},"1.2.4":{"name":"alibabacloud-tdsr-js-sdk","version":"1.2.4","description":"临运镜模型播放器，含模型播放和标签标注功能","main":"lib/index.js","module":"es/index.js","stylePath":"style.js","scripts":{"start":"build-scripts start --port 8080","build":"build-scripts build","prepublishOnly":"npm run build && npm run doc","lint":"eslint --cache --ext .js,.jsx ./","doc":"typedoc --plugin typedoc-plugin-markdown --out ./documents --exclude '**/+(MockSceneData|mock).ts' --excludeExternals ./src"},"keywords":["tdsr","react","component"],"dependencies":{"@types/lodash":"^4.14.157","@types/qs":"^6.9.3","alibabacloud-tdsr-js-player":"^1.2.2-beta.2","lodash":"^4.17.19","prop-types":"^15.5.8","qs":"^6.9.4","whatwg-fetch":"^3.4.1"},"devDependencies":{"@alib/build-scripts":"^0.1.3","@alifd/adaptor-generate":"^0.1.3","@alifd/next":"1.x","@ice/spec":"^0.1.1","@types/lodash":"^4.14.158","@types/qs":"^6.9.3","@types/react":"^16.9.13","@types/react-dom":"^16.9.4","build-plugin-component":"^0.2.0","build-plugin-fusion":"^0.1.0","build-plugin-fusion-cool":"^0.1.0","build-plugin-moment-locales":"^0.1.0","eslint":"^6.0.1","react":"^16.3.0","react-dom":"^16.3.0","typedoc":"^0.17.8","typedoc-plugin-markdown":"^2.3.1"},"peerDependencies":{"react":"^16.3.0","@alifd/next":"1.x"},"componentConfig":{"name":"alibabacloud-tdsr-js-sdk","title":"Aoding Panorama SceneSDK","category":"Others"},"publishConfig":{"access":"public"},"license":"MIT","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.4/build/index.html","gitHead":"7608f7ea349391841d76e32b4cb7b8f7c1fc9d91","_id":"alibabacloud-tdsr-js-sdk@1.2.4","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-KV+u4R2aVuqhmnkdYIlTh0VueUoGVxnSazi8iOmRHCZz9Xv0ryu+xgTtdOQERccy+bcrq1pWLZTCwepPfzqYww==","shasum":"112e39197f73decd02ffb9df5a5a3a69a4202efa","tarball":"https://registry.npmjs.org/alibabacloud-tdsr-js-sdk/-/alibabacloud-tdsr-js-sdk-1.2.4.tgz","fileCount":89,"unpackedSize":2243079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWvGfCRA9TVsSAnZWagAASn8P/j/j/ETFs8pBKdGJLBIP\npXuSYxzJ8rXSuRYCnoP1b/78Ww/J83K2XmFiEdOu48LKZx+W4DFirRtzQqcF\no0bv/nqnqTjymw5dCbe+uvynZUZWi3J7y3RDZUVvZYXZBju8KHDHT6Kj+X+p\n+OV63h4HW7wXUxt5jESkbnZUKYRVh1RQVvobAwb7d8LHyoRh574fQXa7Xmeo\nsmvcQablKnMYDGM3OGILWQEfZz+drgjxS1sA9O76RfvtsGby0XmWXj3Ne9or\nEp1ZrlqlkXRJKj11U1V38D+0JcdiWPNlU+iH59gxcCt1h3fFnimEEnjl/FPt\n3pGqHFmqQuaAYaoSZx5gwyhs31XfVeEhIWnfdVJc2pfKhtHi1V5hJmuVdRPI\ni7ImZq3Hy1G+JQHbw9FpeZjTuSklIY3On3XB/bKv+y5xFMSLUYPebpyru/wa\nL1jlRI3OSN6xgzPhqlVCdPRa76NvPZ/uDHMCJ2kOtCsohY9npfRryYm0M0jN\nwkZ6cUAtDXwuplAPsdWy4RDIrjLPoViqEUl9QbNV9I9OYSayeEeu2aRr6l9T\ny87qBhqCo6rvsjSW5nR5qo5J7jHoxcxU9J6LWbvTK0a61Y3Tk4Rc9Sq1NqrI\nmQM5MKowUQTkwB3Zz2aYwrK3O6gmyYnKBYcskXbau6A5F7uvobpQHpY6Dmr8\n7vb0\r\n=fElo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNmoe7nq8zx3HXpyrYZSpbdFSHgIGeAIvPmmoqG/4MfAIgM/Ep6/sLVEFeACt8Opb+R7UiFfNKS5XjsjKVaP2mxuY="}]},"_npmUser":{"name":"yaohuang","email":"huangtt.work@gmail.com"},"directories":{},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},{"name":"yaohuang","email":"huangtt.work@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alibabacloud-tdsr-js-sdk_1.2.4_1616572831351_0.7224620509206872"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-07T12:54:38.303Z","1.0.0-beta.0":"2020-08-07T12:54:38.508Z","modified":"2022-04-11T13:24:07.725Z","1.0.0-beta.2":"2020-08-07T12:56:06.842Z","1.0.0-beta.3":"2020-08-07T13:07:21.291Z","1.0.0-beta.4":"2020-08-13T07:42:58.469Z","1.0.0-beta.5":"2020-08-13T11:17:14.522Z","1.0.0-beta.6":"2020-08-17T12:38:02.907Z","1.0.0-beta.7":"2020-08-18T09:25:39.816Z","1.0.0-beta.8":"2020-08-18T11:24:30.590Z","1.0.0-beta.9":"2020-08-18T12:08:16.359Z","1.0.0-beta.10":"2020-08-18T12:13:06.799Z","1.0.0-beta.11":"2020-08-18T12:57:41.538Z","1.0.0-beta.12":"2020-08-18T13:44:47.242Z","1.0.1-beta.1":"2020-08-18T17:21:54.408Z","1.0.1-beta.2":"2020-08-19T04:35:51.685Z","1.0.1-beta.3":"2020-08-19T05:25:35.702Z","1.0.2-beta.1":"2020-09-07T09:16:28.132Z","1.0.2":"2020-09-07T09:20:51.732Z","1.1.0-beta.1":"2020-09-14T09:30:22.412Z","1.1.0-beta.2":"2020-09-17T15:52:14.635Z","1.1.0-beta.3":"2020-09-18T06:45:48.050Z","1.1.0-beta.4":"2020-09-21T11:05:11.582Z","1.1.0-beta.5":"2020-09-22T06:27:49.090Z","1.1.0-beta.6":"2020-09-22T07:32:12.679Z","1.2.0":"2020-10-13T09:38:29.039Z","1.2.1":"2020-10-30T06:28:31.697Z","1.2.2":"2020-10-31T12:00:20.101Z","1.2.3":"2021-03-24T07:46:32.699Z","1.2.4":"2021-03-24T08:00:31.674Z"},"maintainers":[{"name":"l1ud0ngq1","email":"lliudongqi@gmail.com"},{"name":"yaohuang","email":"huangtt.work@gmail.com"}],"description":"临运镜模型播放器，含模型播放和标签标注功能","homepage":"https://unpkg.com/alibabacloud-tdsr-js-sdk@1.2.4/build/index.html","keywords":["tdsr","react","component"],"license":"MIT","readme":"# 三维重建(临云镜)SDK 使用文档\n\n### 1. 背景介绍\n\n三维重建(TDSR)SDK 主要为三维重建(TDSR)提供了平台生成的三维模型的：模型播放能力、\n与模型进行互动的能力、以及标签标注能力。整个 SDK 分为 PanoramaScenePlayer 和\nPanoramaSceneEdtior 两部分：\n\n- PanoramaScenePlayer 提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图\n  切换，事件监听等能力）\n- PanoramaSceneEditor 继承了 PanoramaScenePlayer 对象，该对象除了提供模型加载，\n  模型交互，还提供了标签编辑的能力，可以跟进 API 进行标签创建、标签删除、标签修\n  改等操作。\n\n该 SDK 与框架无关，您可在 React 框架中使用，也可嵌入到 Angular\\Vue 等任何框架中\n使用。本文档将以嵌入 React 的方式演示如何利用该 SDK 加载三维模型以及如何与三维模\n型进行交互。\n\n### 2. 关键术语\n\n- 模型: 用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的\n  模型；用户可以通过 3D 交互的方式查看该模型的结构。也可以飞入到模型中以全景视角\n  产看场景。\n- 场景: 场景跟模型是一一对应的\n- 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行\n  漫游。\n- 三维模式：传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个\n  子场景之间的关联关系\n- 全景模式: 子场景模型，可通过鼠标点击/SDK 提供的 API 的操作实现场景间切换从而实\n  现场景漫游\n- 标签：SDK 允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标\n  注模式有图片，图像，文本，链接。\n\n### 3. 快速上手\n\n#### 3.1 PanoramaScenePlayer 快速上手\n\n> PanoramaScenePlayer 相关，详见第 5 章\n\n1. 初始化 PlayerService 对象, 该对象封装了前后端通信的能力，提供与后端接口交互\n   API，详见章节 4。\n\n   ```jsx\n   const service = new PanoramaScenePlayerService();\n   // service.registerFetch(utils.mock)  // NOTICE: 本地mock测试，线上不要使用\n   service.registerHook({\n     // 详见章节4\n     async request(method, url, data, header) {\n       const prefix = '//localhost/aoding/demo';\n       return [`${prefix}${url}`, data, header];\n     },\n     async response(result, context) {\n       return {\n         code: result.code,\n         message: result.message,\n         data: result.data,\n       };\n     },\n   });\n   ```\n\n2. 初始化播放器对象\n\n   ```jsx\n   const player = new PanoramaScenePlayer(document, {\n     service: service, // PlayerService对象\n     mode: '1', // mode: 1 | 2,  参数详见5.1\n   });\n   ```\n\n3. 模型加载\n\n   ```jsx\n   await player.load(token); // TODO: 请求获取模型数据接口，并加载模型\n   ```\n\n4. 设置监听事件，详见 5.3 节\n\n   ```jsx\n   player.registerSceneHook({\n     onOrbitRotate: (quaternion) => {\n       console.log('Current Quaternion', quaternion);\n     },\n     onChangePanorama: (panoId) => {\n       console.log('Current Panorama', panoId);\n     },\n   });\n   ```\n\n5. 基于 React 的完整代码如下：\n\n   ```jsx\n   import React, { Component } from 'react';\n   import ReactDOM from 'react-dom';\n   import {\n     PanoramaScenePlayer,\n     PanoramaScenePlayerService,\n     utils,\n     DefaultSceneData,\n   } from 'alibabacloud-tdsr-js-sdk';\n   import axios from 'axios';\n\n   /**\n    * 加载模型\n    * @param {string} token\n    * @param {HTMLDivElement} target\n    */\n   function usePlayer(token, target) {\n     const [myPlayer, setMyPlayer] = React.useState(null);\n     const init = async () => {\n       const service = new PanoramaScenePlayerService();\n       service.registerHook({\n         // 详见章节4\n         async request(method, url, data, header) {\n           const prefix = '//localhost/aoding/demo';\n           return [`${prefix}${url}`, data, header];\n         },\n         async response(result, context) {\n           return {\n             code: result.code,\n             message: result.message,\n             data: result.data,\n           };\n         },\n       });\n\n       const player = new PanoramaScenePlayer(target.current, {\n         service: service,\n         mode: '1', // 如果想预览未发布的Tag, mode设置为2，mode参数详见5.1\n       });\n\n       await player.load(token); // 请求接口&加载模型\n\n       // 设置监听事件，详见5.3节\n       player.registerSceneHook({\n         onOrbitRotate: (quaternion) => {\n           console.log('Current Quaternion', quaternion);\n         },\n         onChangePanorama: (panoId) => {\n           console.log('Current Panorama', panoId);\n         },\n       });\n       return player;\n     };\n\n     React.useEffect(() => {\n       init().then((p) => setMyPlayer(p));\n     }, [token]);\n\n     return myPlayer;\n   }\n\n   function Player(props) {\n     // token 即 listMainScenes 接口中获取的 previewToken\n     const token = '58b51071d0a446318607443bd2135d74';\n     const target = React.useRef();\n     const player = usePlayer(token, target);\n     const style = {\n       width: '100%',\n       height: 450,\n       position: 'relative',\n     };\n     return <div ref={target} style={style} />;\n   }\n\n   ReactDOM.render(<Player />, mountNode);\n   ```\n\n#### 3.2 PanoramaSceneEditor 快速上手\n\n> PanoramaSceneEditor 相关，详见第 6 章\n\n1. 初始化 PanoramaSceneEditorService 对象, 该对象封装了前后端通信的能力，提供与\n   后端接口交互 API，详见下一章节。\n\n   ```jsx\n   const service = new PanoramaSceneEditorService();\n   service.registerFetch(utils.mock); // NOTICE: 本地mock测试，线上不要使用\n   ```\n\n2. 初始化播放器对象\n\n   ```jsx\n   const editor = new PanoramaSceneEditor(document, {\n     service,\n     autoSave: false,\n   });\n   ```\n\n3. 模型加载\n\n   ```jsx\n   await editor.load(token);\n   ```\n\n4. 设置监听事件，详见 5.3 节\n\n   ```jsx\n   editor.registerTagHook({\n     onSelected: (tag) => {\n       console.log('tag', tag);\n     },\n   });\n   ```\n\n5. 基于 React 的完整代码如下：\n\n   ```typescript\n   import React, { useCallback, useState, useEffect } from 'react';\n   import {\n     PanoramaSceneEditor,\n     PanoramaSceneEditorService,\n   } from 'alibabacloud-tdsr-js-sdk';\n   /**\n    * 加载模型\n    * @param {string} token\n    * @param {HTMLDivElement} target\n    */\n   function useEditor(token, target) {\n     const [editor, setEditor] = useState(null);\n     const init = async () => {\n       const service = new PanoramaSceneEditorService();\n       // service.registerFetch(utils.mock) // NOTICE: 本地mock测试，线上不要使用\n\n       service.registerHook({\n         async request(method, url, data, header) {\n           const prefix = '//localhost/aoding/demo'; // 域名需更换为业务方自己服务器域名\n           return [`${prefix}${url}`, data, header];\n         },\n         async response(result, context) {\n           return {\n             code: result.code,\n             message: result.message,\n             data: result.data,\n           };\n         },\n       });\n\n       const editor = new PanoramaSceneEditor(target.current, {\n         service,\n         autoSave: false, // 是否开启标签自动保存\n       });\n\n       await editor.load(token); // 请求接口&加载模型\n\n       editor.registerTagHook({\n         // 标签创建必要\n         onCreating: () => {\n           // tag参数，详见6.4.1\n           const tag = {\n             type: 'TEXT',\n             config: {\n               backgroundColor: '#000',\n               content: '444',\n               title: '1231',\n             },\n           };\n           return tag;\n         },\n         // 标签创建完成\n         onCreated: (tag) => {\n           console.log(tag);\n           // editor.updateTag(tag.id, tag)\n         },\n       });\n       return editor;\n     };\n\n     useEffect(() => {\n       init().then((editor) => {\n         setEditor(editor);\n       });\n     }, [token]);\n     return editor;\n   }\n\n   function Editor(props) {\n     // token 即 listMainScenes 接口中获取的 previewToken\n     const token = 'f9d19ae0541f4131bb787d8a4521d46d';\n     const target = React.useRef();\n     const editor = useEditor(token, target);\n\n     // 添加标签\n     const addTag = useCallback(() => {\n       if (!editor) return;\n       // tips: 添加标签，需配合onCreating事件使用\n       editor.setState(2); // tips: 改为2 即 EDIT态，可鼠标右键创建标签\n       // editor.createTagInView({ x: 1, y: 1 }) // 在指定位置添加标签\n     }, [editor]);\n\n     // 切换至3D模型，DollHouse: 3D模型，Panorama: 全景模式\n     const go3D = useCallback(() => {\n       if (!editor) return;\n       editor.changeView('DollHouse');\n     }, [editor]);\n\n     // 保存标签\n     const save = useCallback(() => {\n       if (!editor) return;\n       // save后的标签，可在mode为Preview时展示\n       editor.save();\n     }, [editor]);\n\n     // 发布标签\n     const publish = useCallback(() => {\n       if (!editor) return;\n       // save后的标签，可在mode为Online时展示\n       editor.publish();\n     }, [editor]);\n\n     return (\n       <div>\n         <div\n           ref={target}\n           style={{\n             width: '100%',\n             height: 450,\n             position: 'relative',\n           }}\n         />\n         <button onClick={() => addTag()}>ADD Tag</button>\n         <button onClick={() => go3D()}>go 3D</button>\n         <button onClick={() => save()}>save</button>\n         <button onClick={() => publish()}>publish</button>\n       </div>\n     );\n   }\n   export default Editor;\n   ```\n\n---\n\n### 4. 通信\n\nSDK 需要依赖后端接口进行模型的加载以及标签的增删改查，考虑到安全性，需要**业务\n方**对依赖接口进行转发，其架构如下图。三维重建服务端把依赖的后端接口通过 Open\nAPI 的方式开放给业务方，业务方可以通过 Open API SDK 方式与这些接口进行交互，并通\n过 WEB API 方式转发给 WEB 端的播放器。播放器通过转发后的 API 实现三维重建服务端\n通信, 又能保证其安全性，以及各平台兼容性\n。<br />![image.png](https://intranetproxy.alipay.com/skylark/lark/0/2020/png/8378/1596797076341-be41464e-5229-4d04-8ab2-73fd3037206e.png#align=left&display=inline&height=272&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1080&originWidth=2898&size=314136&status=done&style=none&width=730)<br />PanoramaScenePlayerService、PanoramaSceneEditorService\n对象封装了通信能力，开发者可以通过\n`const service = new PanoramaSceneEditorService();`  和\n`const service = new PanoramaSceneEditorService();`的方式创建该对象。\n\n- **Mock**：为了方便开发者进行本地调试\n  ，PanoramaScenePlayerService、PanoramaSceneEditorService 提供了 Mock 数据的能\n  力，开发者在开发前期可以通过如下的方式加载 Mock 数据进行本地开发\n\n  - service.registerFetch: `(replacedFetch: fetch) => viod;` 替换底层 fetch 库，\n    用于 mock 数据\n\n    ```jsx\n    service.registerFetch(utils.mock); // NOTICE: 本地mock测试，线上不要使用\n    ```\n\n- **协议适配**: 考虑到不同业务方前后端通信协议会有较大差异\n  ，PanoramaScenePlayerService、PanoramaSceneEditorService 开发了协议转换的能力\n  ，用户可以通过 registerHook 接口进行协议转换。比如以下 Code 给 URL 增加前缀，\n  同时对返回结果进行适配\n\n  - service.registerHook: `({request, response}) => viod;`\n\n  - 参数说明：\n\n    - request 请求拦截器\n\n      - method: GET | POST 请求方式\n\n      - url: string 临云镜后端 SDK 接口地址，接口在前端 SDK 内部调用，详见下\n        文`服务端接口对应交互API`\n\n      - data: object 请求参数\n\n      - header: object 请求头\n\n    - response 响应拦截器\n\n      - code: number 状态码 code:0 为成功，否则抛出异常\n\n      - message: string 错误信息\n\n      - data: object 临云镜后端 SDK 返回的 data 数据，具体参数详见临云镜服务端\n        SDK 接口文档\n\n  - 示例\n\n    ```jsx\n    service.registerHook({\n      // 请求拦截器\n      async request(method, url, data, header) {\n        const prefix = '//localhost/biz'\n        return [`${prefix}${url}`, data, header];\n      },\n      // 响应拦截器\n      async response(result, context) {\n        return {\n          code: result.errorCode,\n          message: result.errorMessage,\n          data: result.data\n      }\n    });\n    ```\n\n- **API**: 以下 API 均为 SDK 内部已封装集成，无需手动调用（域名需业务方自己通过\n  registerHook 配置），API 内会自动调用服务端接口。接口参数可参考临云镜服务端\n  SDK 接口文档。\n\n      - PanoramaScenePlayerService\n\n          > player.load()时，SDK内部调用\n\n          - service.getPanoramaConfigData: `(token: string) => response;` 获得全局配置信息，调用接口：`/getWindowConfig`\n\n          - service.getSceneData: `(token: string) => response;` 获取场景渲染数据，调用接口：`/getSceneData`\n\n          - service.getTags: `(subSceneUuid: number, previewToken: string, type: number) => response;` 获取所有热点标注数据，调用接口：`/getHotspotTag`\n\n      - PanoramaSceneEditorService\n\n          > tips: 继承 PanoramaScenePlayerService 所有 API，无需手动调用，save()&publish()时自动调用\n\n          - service.saveTags: `(subSceneUuid: number, tags: ICombinedTag[]) => response;` 保存标签。tips: ICombinedTag为标签数据，调用接口：`/saveHotspotTag`\n\n          - service.publish: `(subSceneUuid: number) => response;` 发布标签，调用接口：`/publishHotspot`\n\n---\n\n### 5. Panorama Scene Player\n\nPanoramaScenePlayer 对象提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视\n图切换，事件监听等能力）\n\n#### 5.1 Constructor\n\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaScenePlayerConfig)\n```\n\n- target: Player 的 DOM 容器\n- config\n  - service: 前后端通信对象，见 4. 通信 章节内容\n  - mode:\n    - Player 的模式，支持 Preview = '2', Online = '1',\n    - 其中 Preview 加载已经创建，但是还没有发布的标签和已经发布的标签；Online 只\n      会加载已经发布的标签\n  - view: DollHouse(3D 模式)\\Panorama(全景模式), 默认为 DollHouse 模式\n\n#### 5.2 Load/Unload\n\n- 加载模型，previewToken 为模型的唯一标示，可以通过 OPEN API 提供的接口获得，详\n  见后端 SDK\n\n  ```typescript\n    async player.load(previewToken: string)\n  ```\n\n- 卸载模型\n\n  ```typescript\n    async player.unload()\n  ```\n\n#### 5.3 注册监听事件\n\n```typescript\nregisterSceneHook(hooks); // hooks: {} 一个事件对象\n```\n\n- hooks.onLoad: `() => void;`  加载完成事件\n- hooks.onChangeView: `(type: EnumPanoramaSceneView) => void;`  切换全景/3D 模式\n  事件\n- hooks.onChangePanorama: `(panoId: string) => void;`  切换子场景事件\n- hooks.onOrbitRotate: `(quanertion: TypeQuaternion) => void;` 场景旋转, 目前暂\n  不支持三维空间旋转\n\n#### 5.4 API\n\n1. `player.getTagList()`  获得所有标签\n2. `player.getTagListByPanoramaId(panoId)`  获得当前子场景下标签\n3. `player.getPanoramaList()`  获得所有子场景\n4. `player.changeView(view)`  切换视图，支持 DollHouse(3D 模式)\\Panorama(全景模\n   式),\n5. `player.flyToPanoramaById(panoId)`  跳转到指定子场景\n6. `player.hideTag()`  隐藏标签\n7. `player.showTag()`  显示标签\n8. `player.flyToTag(tagId)`  跳转到指定标签位置\n9. `player.getTagClientPosition(tagId)`  获得 Tag 的屏幕坐标\n10. `player.getCurrentPanorama()`  获得当前子场景，若在 Dollhouse(3D)模式下，返\n    回为 undefined\n11. `player.isTagInViewScene(tagId)`  判断标签是否当前视口可见\n12. `player.getRotateQuaternion()` 获得当前场景旋转四元组\n13. `player.setRotateQuaternion(quaternion)` 设置当前场景的旋转四元组\n\n---\n\n### 6. Panorama Scene Editor\n\nPanoramaSceneEditor 继承了 PanoramaScenePlayer 对象，该对象除了提供模型加载，模\n型交互，还提供了标签编辑的能力，可以跟进 API 进行标签创建、标签删除、标签修改等\n操作。 <a name=\"7R1xe\"></a>\n\n#### 6.1 Constructor\n\n```typescript\nconstructor(target: HTMLDivElement, protected config: IPanoramaSceneEditorConfig)\n```\n\n- target: Player 的 DOM 容器\n- config\n  - service: 前后端通信对象，见 4. 通信 章节内容\n  - autoSave: 是否自动保存 TAG, 若 autoSave 为 true, 模型创建、模型取消选中、模\n    型更新、模型拖拽、\n  - view: DollHouse(3D 模式)\\Panorama(全景模式), 默认为 DollHouse 模式\n\n#### 6.2 Load/UnLoad\n\n- 加载模型，previewToken 为模型的唯一标示，可以通过 OPEN API 提供的接口获得，详\n  见后端 SDK\n\n  ```typescript\n    async editor.load(previewToken: string)\n  ```\n\n- 卸载模型\n\n  ```typescript\n    async editor.unload()\n  ```\n\n#### 6.3 注册监听事件\n\n```typescript\nregisterTagHook(hooks); // hooks: {} 一个事件对象\n```\n\n- hooks.onClick: `(tag: ICombinedTag) => void;`  点击标签事件\n- hooks.onSelected: `(tag: ICombinedTag) => boolean;`  标签选中事件\n- hooks.onWillUnselected: `(tag: ICombinedTag) => boolean;`  标签取消选中事件\n- hooks.onCreating: `() => ICombinedTag;`  创建标签事件\n- hooks.onCreated: `(tag: ICombinedTag) => void;`  标签创建完成事件\n- hooks.onUpdatePositions: `(tag: ICombinedTagWithScenePosition[]) => void;`  标\n  签位置更新事件\n- hooks.onDragStart: `(tag: ICombinedTag) => void;`  标签拖拽事件\n- hooks.onDragStop: `(tag: ICombinedTag) => void;` 标签拖拽事件\n- hooks.onDragging: `(tag: ICombinedTag) => void;` 标签拖拽事件\n\n#### 6.4 API\n\nPanoramaSceneEditor 继承了 PanoramaScenePlayer 所有 API 除此之外\n，PanoramaSceneEditor 还提供了跟标签编辑有关的 API\n\n- 6.4.1 创建标签\n\n创建标签目前只能在全景模型下创建，标签创建必须通过 onCreating 事件。\n\n> 自定义创建 tips(参考 3.2 示例): 1.通过 onCreating 创建默认标签。2.通过\n> onCreated 拿到标签 Id。3. 通过`editor.updateTag(tagId, tag)`方法自定义标签内容\n\n1. 通过注册 onCreating 事件回填标签内容\n\n   - tag 参数说明：\n\n     - type: tag 类型支持 IMAGE | TEXT | VIDEO\n\n       > tips: VIDEO 类型的暂时无法播放！如果有播放需求，需业务方前端额外添加弹\n       > 出层，视频在弹出框中播放\n\n     - config: tag 配置\n\n     - formSelectImgType: 'default'(默认) | 'point'(小标) | 'mural'(壁纸); 图片\n       类型，仅 IMAGE 支持\n     - title: string 标题\n     - content: string 内容\n     - backgroundColor: string 背景色\n     - images: string[] 图片 CDN 地址\n     - video: string 视频 CDN 地址\n\n   - tag 示例：\n\n     - 图片：\n\n       ```javastript\n       {\n             type: 'IMAGE',\n             config: {\n               backgroundColor: '#000', // 背景色\n               images: [    // 图片cdn地址\n                 'http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png',\n               ],\n               title: '22222',\n               formSelectImgType: 'mural',\n             },\n       }\n       ```\n\n     - 文本：\n\n       ```javastript\n       {\n             type: 'TEXT',\n             config: {\n               backgroundColor: '#000',\n               title: '22222',\n               content: '11111'\n             },\n       }\n       ```\n\n     - 视频：\n\n       ```javastript\n       {\n             type: 'VIEDO',\n             config: {\n               backgroundColor: '#000',\n               title: '22222',\n               content: '11111',\n               video: '' // 视频cdn地址\n             },\n       }\n       ```\n\n   - onCreating 示例：\n\n     ```typescript\n     editor.registerTagHook({\n       onCreating: () => {\n         const tag = {\n           type: 'IMAGE',\n           config: {\n             backgroundColor: '#000',\n             images: [\n               'http://s.alicdn.com/@lyj/pano_src/100070-82766/hotspot/image/4bbc-06439_LD.png',\n             ],\n             title: '60152892558',\n             formSelectImgType: 'mural',\n           },\n         };\n         return tag;\n       },\n     });\n     ```\n\n2. 通过 `createTagInView(position?: { x: number, y: number })`  接口创建标签，默\n   认在视口中心创建\n\n   ```typescript\n   editor.createTagInView();\n   ```\n\n3. 另外也支持通过鼠标点击方式在指定位置创建标签，开启鼠标点击交互能力\n\n   ```typescript\n   /*\n     播放器状态, state: 1 | 2   默认为: 1\n     1: ROMA, 默认允许进行场景漫游，场景旋转等操作\n     2: EDIT, 编辑态，允许用户右键创建标签\n   */\b\n   editor.setState(1)\n   editor.setState(2)\n   const state = editor.getState() // 获得当前播放器状态\n   ```\n\n- 6.4.2 更新标签\n\n  ```typescript\n  editor.updateTag(tagId, tag);\n  ```\n\n- 6.4.3 选中标签\n\n  ```typescript\n  editor.selectTag(tagId);\n  ```\n\n- 6.4.4 删除标签\n\n  ```typescript\n  editor.deleteTag(tagId);\n  ```\n\n- 6.4.5 保存标签\n\n  - 当开启了 autoSave 模式，模型创建、模型取消选中、模型更新、模型拖拽都会触发保\n    存，否则就需要调用 `save()`  手动触发保存。\n\n  - 保存后的标签可以在 PanoramaScenePlayer 的 Preiview 模式查看，但是不能 Online\n    模式查看\n\n    ```typescript\n    editor.save();\n    ```\n\n- 6.4.6 发布标签\n\n  - 发布后的标签既可以在 PanoramaScenePlayer 的 Preiview 模式查看，又可以在\n    Online 模式查看\n\n    ```typescript\n    editor.publish();\n    ```\n\n### 已知问题\n\n- 暂时无法支持天花板打标\n- flyToTag 接口会触发页面闪动问题\n","readmeFilename":"README.md"}