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全景图的全过程,下一章将跟大家分享如何实现多个场景切换。看了本文如果你有所收获,请动动发财的小手赏给博主一个赞,就是对博主最大的鼓励。
720°VR全景网站制作——多场景切换
720°VR全景网站制作相关推荐
- 720°VR全景网站制作-多场景
一.准备 两张或两张以上全景图片,复制到krpano-1.19-pr13目录下,我这里拿两张全景图片作为演示 二.开始生成多场景的720°VR全景网站 1.按住键盘的ctrl键(左下角第一个键),点击 ...
- VR全景的制作与拍摄
随着互联网的发展,全景技术也是在急速的发展,VR虚拟的体验也是越来越多的.VR全景技术也已经应用到了现在市场的很多行业,比如说2020疫情期间恒大推出的VR看房,汽车之家的VR看车等等.全景图成为了新 ...
- 免费的VR全景网站是什么?免费VR全景网站有什么用?
虚拟现实(VR)技术的应用日益广泛,尤其是在旅游.教育等领域.免费VR全景网站是一个新兴的平台,为用户提供了一个全新的探索未知世界的方式. 一.介绍免费VR全景网站的特点 1.全景视角 免费VR全景网 ...
- 学习VR技术要学哪些内容?VR全景如何制作?
提起VR相当大家而言都不陌生,VR伴随着科技的发展,进入到人们的日常生活中,不少人都对VR技术很关注,不少公司或者企业也开始逐渐发展VR的技术,如果现在对VR技术能够有所了解的话,那么在后期便能够掌握 ...
- 全新VR全景可视化制作小程序系统源码+公众号功能模块1.0.28
正文: 最新VR全景可视化制作小程序系统+公众号功能模块源码1.0.28,功能非常强大,有兴趣自行去体验吧. 1.0.28–全景更新日志: 新增全局开关,支持全景背景MP3跟场景解说同时存在 功能优化 ...
- 家居vr全景展示制作提高客户转化
VR全景制作得到了越来越多商企的运用,可以把企业的真实信息进行全方位的展示,把企业的规模,产品,形象,活动等方面1:1的呈现给客户,让客户身临其境,体验式的了解企业的全貌.这是VR全景的优势,未来会成 ...
- java版VR全景漫游制作平台 - 1介绍
@[TOC](java版在线VR制作平台 – 铁牛VR云平台) 铁牛VR云平台 VR云平台是一个在线VR全景开发平台.平台的初衷是为各种VR全景创业企业提供技术支撑,搭建正规可靠的VR平台,给企业降本 ...
- Three.js杂记(十二)—— VR全景效果制作·中
文章目录 序 正文开始 引入threeJs 材料收集 实现原理 实现步骤 基础的全景完成 完整Vue代码 总结 序 在web的前端发展过程中,对于视觉化的要求已经越来越高 有关于VR全景的效果也同样可 ...
- VR全景的制作流程你知道吗
现在很多的朋友都应该见过VR全景,但是不知道VR全景具体是什么?是怎么做的?有什么作用?今天小粉就给大家说一下. VR全景是当今最新颖的宣传展示的手段,代表了科技的更进一步,随着5G的发展,VR全景的 ...
最新文章
- Project interpreter not specified(eclipse+pydev) (转)
- 第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解
- OpenGl 绘制一个立方体
- c语言中缺少link文件夹,c – Cmake找不到使用“link_directories”的库
- 计算机公共基础知识书第二版答案,二级计算机公共基础知识课后习题及答案.doc...
- Go 单元测试--Mock接口实现和对接口打桩
- php克隆 自动加载
- 诺基亚E63凤凰刷机实战
- vue 使用 vue-wechat-title 动态设置title
- C#控制台应用程序的输入输出
- CVPR2020 Few-Shot Object Detection with Attention-RPN and Multi-Relation Detector论文翻译
- SAP那些事-理论篇-13-SAP问题解决思路
- 官方精简版Windows10:微软自己都看不过去了
- WORDS WORTH光与影的传说简明攻略
- 数据分析的一些方法(一)
- 2012-11-09《Oopsnbsp;Inbsp;Did…
- 2016.04.03软件更新公告
- 数据分析报告——经典统计量的描述性分析:平均数方差、偏度峰度
- 基于S2SH的医院门诊管理系统【数据库设计、源码、开题报告】
- 清华大咖~分享终于有人把云计算、大数据和人工智能讲明白了