React-XRplayer 设计

零、集成与启动模块

1. 集成react-xrplayer到项目中

react-xrplayer播放器通过React组件的方式集成到您的项目中，只需要几行代码，您的应用便能拥有强大的全景互动能力。 实现简单的全景播放

import React from 'react';
import XRPlayer from 'react-xrplayer'
class App extends React.Component {
    render() {
        return (
            <div>
                <XRPlayer
                    width="100vw"
                    height="100vh"
                    scene_texture_resource=
                ></XRPlayer>
            </div>
        )
    }
}
export default App;

2. react-xrplayer组件提供的属性

为了通过传统组件Props的方式来使用react-xrplayer，针对部分属性提供了props的设置方式 通过组件Props属性的方式，适合初始化或者不需要动态变更的场景 以下是提供的props属性（注意：只能用于初始化等场景，不支持动态更改）

  width: '100%',                // 设置播放器高度，支持css常用的写法，直接作用于底层canvas
  height: '100%',               // 同上
  camera_fov: 80,               // 设置全景相机的初始fov大小
  axes_helper_display: false,   // 是否展示坐标坐标系
  hot_spot_list: [],            // 按照指定的数据格式，提供热点标签数据
  event_list: [],               // 按照指定的数据格式，提供事件列表
  model_list: [],               // 按照指定的数据格式，提供模型列表
  embeded_box_list: [],         // 按照指定的数据格式，提供嵌入内容列表
  is_full_screen: false,        // 设置是否全屏

3. react-xrplayer组件提供的回调方法

通过Props，只能实现向播放器设置属性，无法获取来自播放器的信息 因此，还提供了几个方法回调

onFullScreenChange 回调方法

onCreated 回调方法

onEventHandler 回调方法

4. XRManager主模块

react-xrplayer的主要能力大部分均是通过XRManager主模块对外层应用提供的，其提供了面向热点标签管理、内嵌内容管理等等接口方法。本部分主要介绍那些面向整个播放器的接口方法，对于各个模块中的方式，将在下文再详细展开。

import(sence_data)

export():Object

一、全景模块

setSenceResource(res)

get/setGlobalMuted(muted)

start/stopDisplaySenceResource

get/setEnableAutoRotate(enable)

setAutoRotateSpeed(speed)

setAutoRotateDirection(direction)

二、标签模块

1. 标签种类和UI组成

普通标签(label)UI由以qu下几个部分组成

图片标签(image)UI由以下几部分组成

留言标签(avatar)UI由以下几部分组成

2. 标签数据结构 Label

Label
{
    id:'l_xxxxx',
    type: 'label',// 标签类型【label, avatar,image,... 】
    lat: -90, lon: -10, // 标签位置
    text: 'lable', // 文字内容
    text_float:'left', // 文字位置[left,right,top,
    text_size: 'big', // 文字大小[large, medium, small]
    bottom]
    img_url: '', //图片url
    img_width: 30, // 图片宽度
    img_height: 30, // 图片高度
    animate: true,  // icon是否跳动
    event_id: 'e_xxx' // 响应事件id
}

3. 标签相关接口

标签管理器

getLabelManager()

标签管理器-标签容器

以下接口均由LabelManager提供,用于向标签容器中添加和删除标签。

addLabel(label)
removeLabel(id)
getLabel(id)
addLabelList(labelList)
clearAllLabels()
回调方法 onLabelClicked(label)

标签实例

setPosition(int lat, int lon)
getPosition()
setDragable(enable)
getDragable()
setText(text)
setTextSize(size)
setTextFloat(float)
getTextInfo()
setImage(url, width, height)
setImageSize(width,height)
setAnamateEnable(enable)
getImageInfo()
回调方法 onClick(Label)

三、内嵌内容模块

概述

该模块提供四种类型的内嵌资源（文本、图片、视频、模型），用户可在自己的代码中设计好这些资源后通过内嵌资源管理器（EmbeddedBoxManager）添加到XR场景中。

1. 内嵌资源

支持内嵌的内容

内嵌文本

内嵌图片

内嵌视频

内嵌模型

数据结构

基类
EmbeddedBox
{
    // 信息字段
    id:'e_xxxxx',
    type: 'text',// 类型【text,image, video,model】
    callback: function,// 点击回调函数
    lat: -90, lon: -10, // 标签位置
    dragable: false,//可否拖拽
    visible: true;// 是否可见

    // 控制字段
    planeMesh: null,// three.js中的mesh，代表资源实体
    canvas: null,// canvas画布，用于生成材质
    width: 0, height: 0,// 具体大小参数
    manager: null,// 与之关联的内嵌资源管理器
    meshReady: false,// 标记mesh实体是否已经准备好添加到场景中
}
内嵌文本
EmbeddedTextBox
{
    // 目前已提供接口的参数
    text: "请输入文字",// 文本框中的文字
    textSize: "medium",// 字体大小【large, medium, small】
    // 未提供接口，但可修改的参数，以下为默认值
    this.font = 'Arial';    //字体
    this.fontSize = 36;     //字体大小
    this.borderThickness = 5;   //边框厚度
    this.maxWidth = 100;     //一行中文字占用的最多像素，超过就换行
    this.borderDistanceX = 15;  //左边距
    this.borderDistanceY = 15;  //上边距
    this.fontColor = { r:255, g:255, b:255, a:1.0 };    //字体颜色（默认白色不透明）
    this.borderColor = { r:100, g:100, b:100, a:0.5 };  //边框颜色（默认灰色半透明）
    this.backgroundColor = { r:100, g:100, b:100, a:0.5 };  //背景颜色（默认灰色半透明）
}
内嵌图片
EmbeddedImageBox
{
    url = '',// 图片位置
}
内嵌视频
EmbeddedVideoBox
{
    url = '',// 视频位置
    autoplay = false;// 是否自动播放
}

接口

—-共用接口—-

setPosition(lat, lon)
getPosition()
setDraggable(enable)
getDraggable()
setVisible(visible)
getVisible()
onClick(callback)

—-EmbeddedTextBox特有接口—-

setText(String)
setTextSize(textSize)
getTextInfo()

—-EmbeddedImageBox特有接口—-

setImage(url, width = 30, height = 30)
setImageSize(width, height)
getImageInfo()
—–EmbeddedVideoBox特有接口—–
setVideo(url, width = 30, height = 30)
setVideoSize(width, height)
setEnableAutoDisplay(enable)
play()
pause()

2. 嵌入资源管理器

用户设置好内嵌资源后，可以通过嵌入资源管理器（EmbeddedManager）将内嵌资源添加到xr场景中，同时提供根据id查找内嵌资源的功能。

接口

—–以下为XRPlayerManager提供—–

getEmbeddedBoxManager()

—–以下为EmbeddedBoxManager提供—–

addEmbeddedBox(embeddedBox)
removeEmbeddedBox(id)
getEmbeddedBox(id)
clearAllEmbeddedBox()

3. 快捷接口

XRPlayerManager为一些常用的功能提供了快捷接口

simpleCreateTextBox(id)

simpleCreateImageBox(id)

simpleCreateVideoBox(id)

simpleSetEmbeddedBoxEvent(boxId, data)