An excellent xr player for react
js
npm install
`
$3
`js
npm run start
`
$3
`js
npm run compile
`
生成的可发布到npm库位于/lib文件夹中
$3
`js
npm run build
`
打包好的项目位于/build文件夹中
$3
略
快速集成
$3
`js
npm install react-xrplayer
`
$3
`js
import React from 'react';
import XRPlayer from 'react-xrplayer'
class App extends React.Component {
render() {
return (
height="100vh"
scene_texture_resource={{
type: 'hls',
res_url: 'http://cache.utovr.com/s1e3tzoku70yk8mpa3/L3_5dxsrk4kh56gc4l1_v2.m3u8'
}}
>
)
}
}
export default App;
`
接口文档
$3
XRPlayer除了具备全景播控能力以外，还有配套使用的编辑控制器，推荐使用标准化的数据表达方式
#### 场景数据
##### 全景资源数据
`js
`
##### 热点标签数据
`js
[
['infocard', {
phi: -90, theta: -10, animate: true,
res_url: 'https://live360.oss-cn-beijing.aliyuncs.com/xr/icons/hotspot_video.png'
}
],
['image', { phi: 32, theta: 14, res_url: 'https://live360.oss-cn-beijing.aliyuncs.com/xr/icons/hotspot_video.png' }],
]
`
##### 模型数据
Map格式
`js
[
['12332', {
objUrl: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/SambaDancing.fbx",
texture: "texture1.png",
modeFormat: "fbx",
scale: 1
}
],
['23433', {
objUrl: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/texture1.json",
texture: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/texture1.png",
modeFormat: "obj",
scale: 1
}
]
]
`
##### 完整场景数据
##### 事件数据
`js
[
['infocard', {
id: 'infocard',
type: 'infocard',
iframeUrl: "https://gs.ctrip.com/html5/you/place/14.html"
}],
['image', {
id: 'image',
type: 'image',
imageUrl: "https://pic-cloud-bupt.oss-cn-beijing.aliyuncs.com/5c882ee6443a5.jpg",
jumpUrl: 'http://www.youmuvideo.com',
}]
]
`
$3
#### 组件相关
##### width
width: Proptypes.string, 播放器组件的宽度
##### height
height: Proptypes.string, 播放器组件的高度
##### is_full_screen
Proptypes.bool,
#### 全景相机相关
##### camera_fov
camera_fov: Proptypes.number,
##### camera_near
camera_near: Proptypes.number,
##### camera_far
camera_far: Proptypes.number,
##### camera_position
camera_position: Proptypes.object,
##### camera_target
camera_target: Proptypes.object,
#### 全景场景属性
##### scene_texture_resource
Proptypes.object.isRequired,
##### axes_helper_display
Proptypes.bool,
##### hot_spot_list
Proptypes.array,
##### event_list
Proptypes.array,
#### 回调接口函数
##### onCreated
Proptypes.func,
##### onFullScreenChange
Proptypes.func,
##### onEventHandler
Proptypes.func
$3
开放给业务组件的控制接口，提供各种动态控制能力
#### 全景背景控制相关
#### 热点标签控制相关
##### setHotSpots(hot_spot_list, event_list)
用于向场景中添加一组热点标签，在添加前，会将之前所有已有的热点标签清空
* hot_spot_list
热点标签列表
* event_list
标签中涉及的事件列表
##### addHotSpot(hot_spot, event)
用于向场景中单独添加一个热点标签
* hot_spot
热点标签数据
* event
事件数据，可以为null
##### removeHotSpot(hot_spot_key)
用于从场景热点标签中移除一个热点标签
* hot_spot_key
目标移除热点的key
#### 模型控制相关
##### setModels(model_list)
通过列表一次性设置一组模型加载，先前加载的模型会被清除
model_list是一个Map结构，结构示例如下
`js
[
['12332', {
objUrl: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/SambaDancing.fbx",
texture: "texture1.png",
modeFormat: "fbx",
scale: 1
}
],
['23433', {
objUrl: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/texture1.json",
texture: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/texture1.png",
modeFormat: "obj",
scale: 1
}
]
]
`
##### addModel(model_key, model)
向场景中添加单个模型，不影响已有的模型
* model_key：String类型，需要保障唯一性，便于后期的控制与移除
* model：Object类型，模型相关的数据
举例：
`js
addModel('12332', {
objUrl: "https://live360.oss-cn-beijing.aliyuncs.com/xr/models/SambaDancing.fbx",
texture: "texture1.png",
modeFormat: "fbx",
scale: 1
})
`
##### removeModel(model_key)
基于模型的key从场景中移除一个已有模型
举例：
`js
removeModel('12332');
``