Google VR VIEW FOR THE WEB

Google VR?

使用谷歌提供的VR View JS脚本可以将全景照片,视频等资源简单地展示在网站上。本文主要讲解如果通过谷歌的脚本实现图片的VR化。

支持的格式

如上图VR View支持mono 和stereo 360两种图片。支持图片扩展格式为png, jpeg, gif。推荐使用jpeg来提高压缩。

Mono图片推荐宽高比例是2:1 (如:4096:2048)

Stereo图片推荐宽高比例是1:1 (如:4096:4096)

素材准备

由于VR View会通过js请求图片资源,如果图片所处的服务器不支持跨域问题,会报请求错误。
想通过代码体验效果的朋友可以将图片上传至七牛服务器
或者使用下面现成图片


# mono
http://ow4ffxtt1.bkt.clouddn.com/mono-360-1.jpg
http://ow4ffxtt1.bkt.clouddn.com/mono-360-2.jpg
http://ow4ffxtt1.bkt.clouddn.com/mono-360-3.jpg

# stereo
http://ow4ffxtt1.bkt.clouddn.com/andes_512.jpg
http://ow4ffxtt1.bkt.clouddn.com/andes_2048.jpg

主要代码

  • 引入js文件
<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>
  • 添加div节点
<div id="vrview"></div>
  • 添加VR View实例
        window.addEventListener('load', onVrViewLoad)
        function onVrViewLoad() {
            var vrView = new VRView.Player('#vrview', {
                width: '100%',
                height: '500',
                preview: 'http://ow4ffxtt1.bkt.clouddn.com/andes_512.jpg',
                image: 'http://ow4ffxtt1.bkt.clouddn.com/andes_2048.jpg',
                is_stereo: true  //区分是mono还是stereo
            });
        }

本文相关代码

https://github.com/cangyan/TAV/tree/master/00001_VR_VIEW_FOR_THE_WEB

参考链接

https://developers.google.com/vr/concepts/vrview
https://developers.google.com/vr/concepts/vrview-web

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注