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