VR Player 使用文档

						作者:LazyCoder 日期:2020年6月16日

VRVideoPlayer

项目基础依赖于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

插件

1. VRPlayButton.js

                        作者:李守峰 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	点击回调事件

2. VRPlayJoystick.js

                          作者:李守峰 , LazyCoder 2020年7月4日

遥感控制相机 X Y 轴变换

3. VRCamera.js

                        作者:李守峰 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,
});

5. VRPlayRuler.js

                        作者:李守峰  苏和 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
});

bug 修复

setSrc : option 未定义问题
修改 setRotateX 是编译不正确问题

为解决问题:

istonchcontrol :true 时无法控制上下变换

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.vs		.vs
css		css
img		img
plugins		plugins
three		three
1.mp4		1.mp4
2.mp4		2.mp4
Readme.md		Readme.md
Video.html		Video.html
VrVideo.js		VrVideo.js
videopalyer.html		videopalyer.html

Navigation Menu

Repository files navigation

VR Player 使用文档

VRVideoPlayer

代码:

属性

事件

方法

插件

1. VRPlayButton.js

使用方法:

属性

事件

2. VRPlayJoystick.js

3. VRCamera.js

属性

事件

使用方法:

5. VRPlayRuler.js

属性

使用方法:

bug 修复

为解决问题:

About

Releases

Packages

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

VR Player 使用文档

VRVideoPlayer

代码:

属性

事件

方法

插件

1. VRPlayButton.js

使用方法:

属性

事件

2. VRPlayJoystick.js

3. VRCamera.js

属性

事件

使用方法:

5. VRPlayRuler.js

属性

使用方法:

bug 修复

为解决问题:

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages