720°VR全景网站制作

一、简介

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

二、前期准备工作

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

(图1)

2. 下载krpano,用于生成VR网站源码。
链接: https://krpano/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”

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

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

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

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

更多推荐

720°VR全景网站制作