作者:LazyCoder 日期:2020年6月16日
项目基础依赖于Three.js ,同时使用了其中俩个插件 OrbitControls,DeviceOrientationControls,单已经对源代码进行了更改
实例:
1 引用 \
- three/build/three.js,
- controls/OrbitControls.js,
- controls/DeviceOrientationControls.js
- VrVideo.js
- 移动网页
<script>
var vrvideo = new VRVideoPlayer({
eid: "div",
src: "2.mp4",
istonchcontrol:true,
isdevicecontrol: false
});
</script>
| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| fov | number | 84 | 相机 Fov 50 - 120 |
| src | string | 必填 | 视频播放地址 |
| flength | number | 50 | |
| autoAnimate | bool | false | 旋转进入动画 |
| isVR | bool | false | 是否 开启VR |
| autoplay | bool | false | 自动播放,手机端无效 |
| isdevicecontrol | bool | false | 是否开启 陀螺仪 |
| istonchcontrol | bool | false | 是否开启 手指控制 |
| autoAnimate | bool | true | 启动播放动画 |
| animateTimeLenght | number | 2000 | 一毫米为单位 |
| 名称 | 参数 | 说明 |
|---|---|---|
| startplayEvent | null | 开始播放 |
| loadstartEvent | null | 开始加载 |
| endedEvent | null | 播放结束 |
| 方法名称 | 参数 | 说明 |
|---|---|---|
| getVR | 获取 VR 状态 | |
| setVR | true/false | 设置 VR |
| getFov | 获取FOV | |
| setFov | 50-120 | 设置FOV |
| changeFov | - + number | 动态累加 FOV |
| setSrc | string | 设置 视频源 |
| play | 播放视频 | |
| pause | 暂停 | |
| replay | 重新播放 | |
| getCurrentTime | 获取当前播放时长 | |
| getDuration | 获取视频总时长 | |
| setDevicecontrol | true/false | 设置这是陀螺仪 控制 开启 |
| setRotateX | - + number | 设施 X轴 旋转 |
| getRotateX | 获取 x 轴旋转角度 | |
| setRotateY | - + number | 设置 Y轴 旋转 |
| getRotateY | 获取 Y 轴旋转角度 | |
| setRotateZ | - + number | 设置 Z轴 旋转 |
| getRotateZ | 获取 Z 轴旋转角度 | |
| setCamraoTranslateZ | - + number | 设置相机 Z 轴的位置 |
| setFLength | - + number | 设置 Flenght轴 旋转 |
| getFlength | 获取 Flenght |
作者:李守峰 2020年6月18日
移动端无法自动自动播放可以将 autoplay :false ,插件.VRPlayButton 可在VrVideoPlayer 中显示 一个播放按钮
var playbutton = new VRVideoPlayer.PlayButton(vrvideo, {
size :70,
});
| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| videoplay | VRVideoPlayer | 播放器的引用 | |
| options.playbtn_size | number | 70 | 播放图片大小 |
| options.src | string | "./img/play.png" | 图片地址 |
| 名称 | 参数 | 说明 |
|---|---|---|
| callback | undefined | 点击回调事件 |
作者:李守峰 , LazyCoder 2020年7月4日
遥感控制 相机 X Y 轴变换
作者:李守峰 2020年6月18日
与服务端进离线交互,插件.VRCamera 可在VrVideoPlayer 右侧显示 一个拍摄按钮
| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options.camera_width_height | number | 70 | 按钮容器大小 |
| options.camera_border_radius | number | 100 | 播放图片大小 |
| options.camera_top | number | 0 | 边距 顶 |
| options.camera_right | number | 30 | 边距 右 |
| options.camera_display | bool | false | 是否显示 |
| 名称 | 参数 | 说明 |
|---|---|---|
| callback | undefined | 点击回调事件 |
var VRCamera = new VRVideoPlayer.VRCamera(vrvideo, {
camera_display: false,
});
作者:李守峰 苏和 2020年7月9日
焦距处理,插件.VRPlayRuler 可在VrVideoPlayer 右侧显示 刻度尺
| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| options.canbox_right | number | 10 | canvas右边距 |
| options.kd_font_size | number | 16 | 刻度标数字体大小 |
| options.kd_color | color | 'white' | 刻度标数颜色 |
| options.kd_right | number | 30 | 刻度标数右边距 |
| options.kd_top | number | 30 | 刻度标数上边距 |
| options.kd_show | bool | true | 是否显示刻度标数true显示 false隐藏 |
| options.canbox_display | bool | true | 是否显示 |
var VRPlayRuler = new VRVideoPlayer.VRPlayRuler(vrvideo, {
canbox_display: false
});
- setSrc : option 未定义问题
- 修改 setRotateX 是 编译不正确问题
- istonchcontrol :true 时 无法控制上下变换