720°VR全景网站制作

720°VR全景网站制作

一、简介

最近市场上的VR看房、VR车展搞得火热。通过业余时间和几位感兴趣的伙伴一起深入研究了下。在此记录，希望对需要的人有所帮助。

二、前期准备工作

1. 用于制作VR全景的图片（如图1），全景图片获取方式有以下三种选择。
①使用安卓手机下载一个谷歌相机，选择“Photo Sphere”模式即可拍摄全景图片。此方式照片质量低，适合自己弄着玩玩。
②用单反拍摄各个方位的图片，使用“PTGUI”工具（该工具使用方式请自行百度）将图片集制作成全景图。效果最佳，对专业技能要求较高
③各大电商平台都有拍摄全景照片的相机出售，能够傻瓜式的拍摄质量较好的图片。推荐

（图1）

2. 下载krpano，用于生成VR网站源码。
链接: https://krpano.com/download/（博主使用的是krpano-1.19-pr13版本，其他版本使用过程大同小异，同学们可根据自己需要选择）

3. 安装一个可以承载HTML网站的服务端（如iis、apache, tomcat），博主因为是做.NET出身，所以选用iis作为服务端。（觉得本点是天书看不懂的，请找个程序员小哥哥帮忙，他们虽然内心闷骚并且不爱洗头发，但是会很乐意帮助你的）

三、生成VR全景文件

1.找到krpano的根目录，将制作好的图片复制到根目录下。

2.将图片拖动至“MAKE VTOUR (NORMAL) droplet.bat”程序上

3.弹出CMD窗口，开始生成网站。

4.待CMD进度条读完后，我们将会看到根目录下生成了一个名为“vtour”的文件夹，这就是我们要用的网页文件。

四、将静态网站部署至服务端IIS（小白不知道电脑如何开启IIS服务的请自行百度）

1.打开IIS界面，展开电脑名称，右键点击网站，然后选择添加网站。

2.输入网站名称，我们这里将网站取名为“www.vrtest.com”

3.物理路径选择刚才生成的vtour文件夹

4.IP地址和主机名填写我们电脑的内网IP，端口填写8080点击确定

5.打开浏览器输入http://192.168.0.123:8080/tour.html就可以看到我们的VR全景图了

以上就是制作单个VR全景图的全过程，下一章将跟大家分享如何实现多个场景切换。看了本文如果你有所收获，请动动发财的小手赏给博主一个赞，就是对博主最大的鼓励。