alibaba-lyj-js-player

简介

1. 背景介绍

三维重建 SDK 主要提供了平台生成的三维模型的：模型播放能力、与模型进行互动的能力、全景单图播放与互动能力、全景视频播放能力、以及标签标注能力。整个 SDK 分为 ：

• PanoramaScenePlayer 提供了基本模型加载，模型交互（如场景漫游，飞入标签，多视图切换，事件监听等能力）
• PanoramaSceneEditor 继承了 PanoramaScenePlayer 对象，该对象除了提供模型加载，模型交互，还提供了标签编辑的能力，可以根据 API 进行标签创建、标签删除、标签修改等操作。
• SingleImagePlayer 提供了基本全景图片加载，标签加载等能力。
• SingleImageEditor 继承了 SingleImagePlayer 对象，具备其所有功能，以及标签编辑的能力，可进行标签创建、标签删除、标签修改等操作。
• SingleVideoEditor 提供了基本全景视频加载，视频播放等能力。

该 SDK 与框架无关，您可在 React 框架中使用，也可嵌入到 Angular\Vue 等任何框架中使用。本文档将以嵌入 React 的方式演示如何利用该 SDK 加载三维模型以及如何与三维模型进行交互

2. 关键术语

• 模型: 用户将全景照片上传到三维重建(TDSR)平台，利用平台的模型重建能力创造出来的模型；用户可以通过 3D 交互的方式查看该模型的结构。也可以飞入到模型中以全景视角产看场景。
• 场景: 场景跟模型是一一对应的
• 子场景: 与平台子场景含义相同，一张全景图即一个子场景，用户可以在不同子场景进行漫游。
• 鸟瞰模式：即三维模式。传说中的“上帝视角“，在该模式下，用户可以较清晰看到模型结构，以及各个子场景之间的关联关系
• 漫游模式：即全景模式。子场景模型，可通过鼠标点击/SDK 提供的 API 的操作实现场景间切换从而实现场景漫游
• 标签：SDK 允许在编辑模式下进行图像的标注，标注后会一标签的形势存在，目前支持标注模式有图片，文本，链接。
• 全景图片：与平台全景图片含义相同。不通过模型重建，直接加载单张全景图片，仅有全景模式且不支持三维模式和子场景间跳转。
• 全景视频：与平台全景视频含义相同。直接加载单个全景视频文件，仅有全景模式且不支持三维模式和子场景间跳转。

快速上手

临云镜渲染引擎

获取

• npm 安装

  npm i --save alibaba-lyj-js-player

• cdn 引入

  <script type="text/javascript" src="https://g.alicdn.com/sail-fe/alibaba-lyj-js-player-umd/0.0.2/bundle.js"></script>
  <script type="text/javascript">
        const {
        DataSouce,
        PanoramaSceneEditor,
        PanoramaScenePlayer,
        Service,
        SingleImageEditor,
        SingleImagePlayer,
        SingleImageRender,
        SingleVideoPlayer,
      } = window.SailLib;
  </script>

绘制一个简单的全景模型

• 初始化 Service 对象, 该对象封装了前后端通信的能力，提供与后端接口交互 API。

  var service = new Service({
    mode: 0, // 0 未发布 | 1 已发布
    previewToken: '', // 模型的previewToken
  });
  
  // 协议适配
  service.registerInterceptors({
    async request(method, url, data, header) {
      const prefix = '//localhost';
      return [method, `${prefix}${url}`, data, header];
    },
    async response(result, context) {
      return {
        code: result.code,
        message: result.message,
        data: result.data,
      };
    },
  });
  

• 初始化播放器对象

  var player = new PanoramaScenePlayer({
    parentDom: document.getElementById(''),
    service: service,
  });
  

• 模型加载

  player.load().then(() => {});
  

详细 API 信息请查看docs