360度vr全景制作软件件 webvr 怎么调用

360度全景视频与VR视频的主要区别 全景摄像机 编辑制作软件
查看: 229|
评论: 0|原作者: money
摘要: 360度全景视频与VR视频的主要区别 全景摄像机 编辑制作软件
360 度全景视频能很好的填补虚拟现实内容的空缺。但从本质上讲,360 度全景视频只是如今平面视频的延伸,目的是为铺垫未来 VR 的发展。要获得完整 VR 体
360度全景视频与VR视频的主要区别 全景摄像机 编辑制作软件
360 度全景视频能很好的填补虚拟现实内容的空缺。但从本质上讲,360 度全景视频只是如今平面视频的延伸,目的是为铺垫未来 VR 的发展。要获得完整 VR 体验,拍摄电影时必须使用 360 度全景摄像机。目前,制作 VR 视频娱乐的成本还很难预测。
所有类型电影都可进行 VR 体验升级,包括动画片、科幻电影、纪录片。目前 VR 影片要短于普通电影,大部分都不到 10 分钟,原因是长时间观看 VR 会引起恶心呕吐。
360 度全景视频由多个摄像机同时对物体进行多角度拍摄,支持多角度播放。用户可上下滚动观看,也可以左右旋转观看。观看 360 度全景视频不再是被动观看,用户成为了观看内容的参与者。360 度全景视频能以一种全新的方式吸引用户,提高用户互动。
360 度视频可提供普通视频所无法提供的体验,普通视频只能为观众提供一种体验,而 360 度视频允许观众亲自控制这种体验。如汽车经销商想要展示一部新车内饰,该怎么办呢?360 度视频能把观众置于驾驶员位置,从而感觉这车内饰的舒适、车内空间等。
几乎所有 360 度全景视频都面临一共同问题:视差。如你仔细观看视频,可能会发现一些奇怪的画面,比如当有人绕过摄像机的时候,他们的身体会被分成两截,或者变成诡异的 “千手观音”。通过软件修复 360 度全景视频的 “视差” 问题,会耗费大量时间。有时,这些问题可能甚至无法修复。
但 360 度全景视频不等同于 VR 视频。360 度全景视频更多强调全方位可见,更像是动态的全景图,而 VR 视频需要具备三个条件:
沉浸感:通过实拍和 CG 方式制作 360 度带有景深信息的影像,用户的体验是沉浸在其中观看无死角的环绕效果,用户从传统的被动欣赏转换为主动探索。
同在感:借助虚拟现实,现实设备营造用户和场景同在一个空间中的虚拟体验,是一种没有边界的观感。
交互性:VR 视频的最典型特征,借助于陀螺仪瞄准技术、外部控制器、声音等各种手段对观看内容进行非线性的干预,创造一种视频游戏感,和全景视频相比,是线性与非线性的区别。
360 度全景摄像机2015 年 7 月诺基亚发布 360 度全景摄像机 OZO。这款 OZO 虚拟现实摄像机采用了球型设计,配备了 8 个同步摄像头以及 8 个麦克风,可以独立拍摄全立体的虚拟现实视频及音频。OZO 最与众不同之处就在于,它能拍摄、实时广播 3D、360 度实况视频。
2016 年 F8 开发者大会上, Facebook 发布了 Surround 360 度全景摄像机。这款设备形似飞碟,采用 17 部超高清摄像机环绕构成,配有基于网络的软件,可在 360 度范围内捕捉图像和自动呈现。
2016 年 MWC 展会上,三星发布了 360 度全景相机 Gear 360。Gear 360 是一款全景视频相机,配有一对 1500 万像素的鱼眼广角摄像头,用户可同时使用这对摄像头拍摄 360 度全景图片,也可使用单个摄像头拍摄 180 度广角图片,普通用户也可创作 VR 内容。Gear 360 能拍摄全景视频和照片并分享到 Facebook、Twitter 等社交平台,还可以通过 Gear VR 进行观看。
2016 年 4 月 GoPro 推出摄像机设备 “Omni VR”。该设备采用六部 GoPro 生产的 Hero 4 同步相机,摄像机结构采用铝材质,该产品定价为 4999 美元,可支持拍摄 8K 视频。GoPro 是专门为极限运动开发的,能适应很多恶劣环境。
360 度全景制作软件
360 度全景视频是以人眼为中心,围绕上下 180 度、水平 360 度无缝衔接的视频影像,影像通过全景播放器,用户可通过点击鼠标、触摸屏幕、陀螺仪等方式实现上下、左右、放大、缩小无死角浏览的视频模式。全景视频按照获取方式可以为三种:实拍获取、CG 制作以及实拍结合 CG 制作。
目前实拍类型的全景视频,采集后期使用的软件,包括:VideoStitch Studio,主要功能是可支持所有 VR 摄像机(多镜头组装模式),支持 GPU 加速模式。软件操作主要分 3 个流程:捕捉、拼接、回放。VideoStitch 支持包括 GOPRO 在内的各种 VR 摄像机设备, VideoStitch Studio 还可进行视频同步输入、白平衡、曝光平衡、视频稳定、方向控制,拼接过程需借助第三方全景图软件 PT GUI 进行拼接模板的制作,最后,调整合适的参数输出为全景视频。
Autopano Video Pro 是一款功能强大的全景视频制作软件,能帮助用户拼接常见 360 度无死角全景视频。软件操作简单,用户只需拖放视频,选择一个拼接模板,或通过 Autopano Giga 来制作一个模板,即可方便快捷的制作出一部全景视频。
CG 制作主要使用 3DS Max、Maya、Cinema 4D 等三维动画软件,通过建模、材质贴图、动画制作,添加虚拟摄像机等,最后借助计算机渲染而成。无需考虑视频拼接错位问题,可完美完成全景拼接。
实拍结合 CG 制作是在蓝、绿影棚拍摄主体影像,包括人物,道具等,然后后期加入 CG 制作背景、环境、或 CG 制作的其它元素和实拍影像做高度融合,达到真实效果。这种方式也是目前美国好莱坞,及中国国内很多科幻电影大片的常见拍摄、特效合成方式。
一些厂商会在拍摄内容的同时进行后期合成,而其他厂商则需使用后期处理软件。目前,这些软件中 Kolor、Video-Stitch 和 AVP 都较为流行。 拍好素材可使用 Kolor Autopano Video 进行编辑,无论是 Windows 还是 Mac 用户,它可处理全景视频拼接,且兼容 YouTube。
某些厂商建议,在处理 360 度视频时,计算机系统至少需要拥有 32 GB 内存。360 度视频的编辑工作与普通视频编辑不同,一旦视频 (由多个摄像头所拍摄) 被 “连接” 后,编辑人员需使用 Adobe Adobe After Effects、Adobe Premiere 等软件处理视频。
就目前而言,创作 VR 电影是一件耗时、复杂又昂贵的流程:无论是拍摄真实世界还是创建虚拟世界,都需要严格的扫描和剪辑能力。
但到底何时,VR 电影才能借助自身优势成为电影界的主流呢?恐怕除了丰富的 VR 内容,还需要 VR 设备的大规模普及,眼下能提供一流体验的 Oculus Rift 和H TC Vive 都太贵了。
在 VR 电影中,物理运动呈现给观众的方式多种多样,可视角度不同、是否使用计算机动画软件、是否使用运动摄像机 ……都是电影制作过程中需要考虑的。目前,可利用为标准电影准备的现有资源—— CGI(电脑成像)对象、背景底片 —— 再通过 CG 软件、后期特效合成,将共渲染成可从任意方向观影的 VR 体验。
目前,许多头戴设备画面能达到 2K,但画面清晰度也堪忧,使用时,画面拖影和模糊随处可见。加之,VR 产生的数据量实在太大,头戴设备上还连着一根线,要想全面无线化,现有技术又很难达到。目前 VR 影片要短于普通电影,大部分都不到 10 分钟,原因是长时间观看 VR 会引起恶心呕吐。
请关注 "德云社区" 及其微信公众号,了解相关资讯
版权声明:
整理,原文来自网络。
72165262631171188238187236202
236198295275272245335340271386
7714147342211215621352075204820301978195917501584138113311252
2126183314291142984848829822660632
78775584217401150998582
6256597355924892480644052995270126142250
836634577529513498488441394375
2591167715681279797758731678642481
49631156502399389361352333330309
295721427778234470407139363351259121021941
版权所有 &通信世界网消息() 从有不同卖点的各大硬件厂商VR头显,VR一体机,到配合推出的VR内容聚合平台,对用户而言,目前众多VR体验均是以应用程序的形式呈现,这意味着你在体验VR前,首先针对不同的VR内容APP进行360度搜索与下载,很可能出现的情况就像现在你的手机里装了各种不同的视频类APP。而如果你的手机存在靠每天删除缓存来增加可用容量的情况,web VR则改变了这种形式,避免了你的尴尬,因为它将VR体验嵌入了浏览器内。百度VR浏览器,作为国内首款VR浏览器,相比于众多VR内容聚合平台来说,除了为你的VR体验提供简化外,它能实现的VR场景,也比单纯的内容聚合平台更加广泛!
百度VR浏览器官网:
当你想看最精彩最专业的VR内容时,可以任意挑选
百度VR浏览器不仅能够满足基础VR内容聚合平台的功能,更基于百度的基因,运用web渲染引擎将普通网页VR化,实现了webVR技术与浏览器的结合。百度VR浏览器聚合了全网最全的VR内容,从VR网页浏览,到VR视频播放、VR应用下载,VR爱好者可以在不同板块或者搜索框内任意选择或搜索浏览/观看喜欢的内容。虽然目前的交互方式主要是凝视,未来还将拓展语音和手势结合更为人性化的交互方式,进一步优化VR体验。
不去电影院,也能把电影看出IMAX巨幕级的效果
除了百度VR浏览器已经精心准备的专业VR内容之外,百度VR浏览器还可以把普通的2D电影,看出电影院的效果;而在原有3D大片的基础上,3D大片被赋予VR特点,你只需配戴一台VR设备,就可以看出电影院3D巨幕/IMAX的效果,畅享3D大片+VR的体验。此外,百度VR浏览器自营的360度全景VR视频,更是极具代入感和真实感,热门的全景视频会在百度VR浏览器“热门推荐”频道实时更新,保证了资源的及时与丰富性。
比如,当你精神紧张,压力过大,通过360度全景VR视频《放松之旅诺朗加港》观看自然风光,相信能够让你的压力和焦虑得到良好的释放。
用VR的方式浏览你每天必刷的网站是怎样的体验?
对文艺青年来说,有想象过VR体验看豆瓣友邻的图片是什么感觉?对二次元重度爱好者而言,用VR效果看字幕飘过时的想法是什么?没错,相比较于只有视频和游戏的内容聚合平台,百度VR浏览器最大的特点就是推出了webVR的技术。顾名思义,就是能把普通网站也“VR化”,让网站里的内容也能够获得更好的视听体验,让原来不具备VR属性的视频,也统统都能变成VR。除了这些,百度VR浏览器还通过webVR的技术,加入了全景图片、直播等内容。记者制作VR的傻瓜式工具和步骤
&&& 思想可以交流,体验难以沟通,但有了VR,你能体验难民生活,甚至漫游火星,和&感同身受&不远了。然而,缺乏编程经验的记者也能做出VR作品吗?VR程序员Dan Zajdband推荐了数款&傻瓜式&VR神器,简单易学,不妨一试。
新闻是VR技术的最佳试验田。纽约时报在APP nytvr上发过众多VR报道,适用于安卓和OS系统。华盛顿邮报巧用VR将我们&带入&火星,卫报则还原了监狱里&单独监禁&的生活。
记者制作VR的傻瓜式工具
谷歌、Facebook和微软这样的科技公司,正与游戏制作商、艺术家和程序开发员并肩协作,一同拓宽技术的用途。我们仍在不断试验,试图勾勒出VR的未来面貌。
随VR技术的不断发展,Mozilla、谷歌和其他公司都开始完善公开标准,以直接用网页打造VR体验,创造出可以连接VR设备的JavaScript API &WebVR&。草拟的API规范已经出炉。现在我们甚至能在移动浏览器添加API之前,用polyfill(用于实现浏览器不支持的原生API的代码)使用WebVR。
有了WebVR,网络程序开发员就能获取多种设备信息,包括位置、定位、速度、加速幅度、视野范围和眼距数据,以开发VR应用。
我个人对WebVR技术的发展和其对新闻的影响很感兴趣。这里介绍多种我尝试过的VR工具,方便记者和不懂图片编程的程序员创造新作。
拍摄全景素材是制作VR场景的第一步,我推荐以下应用:
拍摄360度全景照片
(尼康FDSLR拍摄360度全景照片)
拍摄360度全景的理想格式叫做&等距柱状投影(equirectangular)&,用手机即可拍摄。
对安卓系统来说,安卓相机(The Android Camera)是个好选择,它有全景照片模式(Photo Sphere),还有一个活跃的社群,方便交流使用技巧。你也可以试试谷歌的Cardboard相机,能在拍摄全景时录制声音。
在iOS系统,你可以下载谷歌街景APP拍照片&&这是同类APP里的最佳之选。
如果你不想用自己的照片,也可从Flickr的等距柱状投影群组上随时搜索、选用图片,图片总数多达15000张(记得注明摄影师,注意授权证书规定)。
拍摄360度视频
拍360度视频,需用特制相机。现在用户相机功能不完善,但仍有几个值得一用:
Ricoh Theta S和三星Gear 360相机都有自己的APP和软件,可供视频预览、编辑、上传,使用便捷。它俩的电池续航和发热情况都不太理想,但拍的视频都挺优质。
若需更优质的视频,VR制作者有时还用带杆的GoPro拍摄,今后肯定还有更多相机和技术供你选。
为VR作品录制音频
录音比较简单,用一般录音器就能搞定。如果想在360度视频里录音,可以选用特制麦克风。点击查看推荐工具。
Free Space 全向型两耳式麦克风
Adobe After Effects的处理界面
等距柱状投影的照片和视频一般采用普通媒体格式。用户通过摄影APP即可编辑全景照片/视频文件。
唯一需要注意的是,如果存照片的域名和你VR APP/网站的域名不一致,服务就需要支持&跨域资源共享&(Cross-origin resource sharing,简称CORS,通过它浏览器和服务器可以安全地进行跨域访问)。如果你对CORS不了解,别担心,上传图片至Imgur等服务,视频传至公共的Dropbox文件夹,就没问题了。要想把文件传至亚马逊简单储存服务(Amazon S3),就需设置CORS。
以下为在公开网站制作VR作品的三类工具,技术难度依次递减:
1. 有了谷歌WebVR Starter Kit,设置场景随心意
在程序员的努力下,现在用户仅用一两行JavaScript或HTML代码,就可制作简单的VR场景,观众用Oculus(Facebook旗下虚拟现实头戴设备制造商)或是谷歌生产的头戴式工具即可观赏。
程序开发者Brian Chirls的项目WebVR Starter Kit值得一提,他所写的数据库可在几秒内让程序员或是略有JavaScript书写经验的人做出VR场景。数据库的威力,在这些作品上显现无疑。
将数据库添加至网站,只需添加块状体、球体、声音、全景画面、视频等元素,设定位置、颜色、材质等属性,网站就能自动转换成三维VR场景。神奇的是,你还能添入简单动画。
你可以随意设置场景,用两行代码绘出木地板和天空:
还能加上绿色圆柱,调整位置,告诉别人这是你的专属:
再用三行代码,就能为可爱精致的视频营造愉悦氛围。
2. A-Frame加 HTML,网站也能做VR
在接触WebVR starter kit一段时间后,我发现Mozilla团队&MozVR&正在进行网页VR的实验,能帮完全不懂JavaScript的人做出VR效果,堪称业界良心。
这项目叫做A-Frame。它的创意是用HTML的标签和配置文件制作VR场景,让VR制作像建网站一样简便。A-Frame项目网站上列有诸多样例,文件分类极为细致,他们的VR社区讨论活跃,规模也不断扩大。网站上的每个样例,均有源代码链接,方便查看。
而且,能在 WebVR starter kit设置的物体,也都能在A-Frame里找到,包括3D模型加载器、场景移动的箭头控制等方便实用的资源。
假设我们想以视频围绕场景,在里面设个立方体,可以用a-box和a-videosphere的标签实现:
加一个球形视频也只需添加几行HTML代码即可,过程简单易行。
如果你还没有领会到这个工具的强大之处,不如看看华盛顿邮报用A-Frame做出的VR成品,能带你走上逼真的火星之旅。
3. 不会编程没关系,简单描述也成型
用过上述表现不凡的工具后,我想到了两个问题:
是否可以在VR故事里加背景?
记者是否能学会A-Frame?我该不该为他们开发一个更简单的工具?
从问题出发,加上实验,我开发了系列工具Guri VR。Guri专为记者和非程序员设计,根据直观描述就可营造VR体验。其中最主要的工具就是&Guri编辑&。通过这款在线工具,用户可用简单的英语描述他们的预期体验,生成用于共享和网站嵌入的作品链接。
工具会输出一个HTML文件,可使用自动生成A-Frame 标注。如果你只想创制原型,将代码交给程序员修改,它就再合适不过了。
登入,即可使用&Guri编辑&了,我们先来看看如何像工具描述简单场景。例如,我可以在编辑里写入:
我的首个场景持续5秒,有天蓝色背景,和一行字:&这是我的第一个场景&。
第二个场景时长30秒,有一个位于/8e6da182-c794&d-d43da2fd5507/的全景图像并带有音频/49f6a82b&30fc&4ab9&80b5&85f286d67830/。
点击,查看成品。
&Guri编辑&目的之一,就是消除VR生成工具和用户间的合作不畅,它内置了文件上传器。用户将文件拖拽至&Guri编辑&,根据光标选择存储位置,就可上传。
我的目标是为VR生成工具创制友好界面,因此实现与现有工具的互动很重要。例如,我正在设计一个A-Frame制图组件。往这个组件里添加制图器输出的JSON文件,就可以为图表绘制3D显示图。这在任何A-Frame场景都能实现,也是&Guri编辑&的功能之一。看指南就可入门。
1)VR推特机器人
此外,Guri也是一个可以读取JSON文件的API,能将我们的预期效果转成A-Frame可处理的格式,以便后续完善。
为了简化VR制作的程序,我甚至还用Twitter开发了一个模型。我用GuriVR和推特API,把推特账户@guri_vr设成VR机器人。如果你在推特发等距柱状投影时提到了@guri_vr,它就自动将VR场景链接嵌入推特卡片(Twitter Card)回复你,你就可以直接在推特浏览VR了。
不过就目前来说,它仅适用于单张图片。但只要稍作改进,它也可以将多个全景场面变为场景或字幕卡。
2)在公开网络实现&感同身受&
Guri VR是开源工具,现在仍需大修大改,可以在Github上制作副本并帮我改进。
VR为报道开辟了更有影响力的新型讲述方式,简化VR原型制作非常必要。和任何新技术一样,VR技术会被吹得天花乱坠,而想要学好它很难。我觉得对新闻编辑室和读者来说,合理使用VR将利大于弊。现在有了公开网络标准,程序员的项目也能尽可能贴近公众。我鼓励你们尝试这些工具,亲自体验其功用。
本文原刊于网站Source,全球深度报道网经授权转载并编译。
作者简介:Dan Zajdband是阿根廷软件开发员,目前作为Knight-Mozilla研究员供职于纽约的开源资源和工具项目&珊瑚项目(The Coral Project)&。他曾参与诸多开源项目,包括黑客/骇客布宜诺斯艾利斯分会,Media Party,HackDash, 布宜诺斯艾利斯前端项目和JS阿根廷开发者大会等。推特账户为@impronunciable。
•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&•&
·网友评论仅代表其个人意见,并承担由此引起的纠纷和责任, 与无关
·请注意言辞,客观地评价,提倡就事论事,杜绝谩骂和人身攻击等不文明行为
·记者网管理员有权在不通知用户的情况下删除非法及不符合规定的评论信息或留作证据
猜您所需:
记者网赞助商百度VR浏览器,用webVR丰富你的VR场景体验
从有不同卖点的各大硬件厂商VR头显,VR一体机,到配合推出的VR内容聚合平台,对用户而言,目前众多VR体验均是以应用程序的形式呈现,这意味着你在体验VR前,首先针对不同的VR内容APP进行360度搜索与下载,很可能出现的情况就像现在你的手机里装了各种不同的视频类APP。而如果你的手机存在靠每天删除缓存来增加可用容量的情况,web VR则改变了这种形式,避免了你的尴尬,因为它将VR体验嵌入了浏览器内。百度VR浏览器,作为国内首款VR浏览器,相比于众多VR内容聚合平台来说,除了为你的VR体验提供简化解决方案外,它能实现的VR场景,也比单纯的内容聚合平台更加广泛!百度VR浏览器官网:当你想看最精彩最专业的VR内容时,可以任意挑选百度VR浏览器不仅能够满足基础VR内容聚合平台的功能,更基于百度的技术基因,运用web渲染引擎将普通网页VR化,实现了webVR技术与浏览器的结合。百度VR浏览器聚合了全网最全的VR内容,从VR网页浏览,到VR视频播放、VR应用下载,VR爱好者可以在不同板块或者搜索框内任意选择或搜索浏览/观看喜欢的内容。虽然目前的交互方式主要是凝视,未来还将拓展语音和手势结合更为人性化的交互方式,进一步优化VR体验。不去电影院,也能把电影看出IMAX巨幕级的效果除了百度VR浏览器已经精心准备的专业VR内容之外,百度VR浏览器还可以把普通的2D电影,看出电影院的效果;而在原有3D大片的基础上,3D大片被赋予VR特点,你只需配戴一台VR设备,就可以看出电影院3D巨幕/IMAX的效果,畅享3D大片+VR的体验。此外,百度VR浏览器自营的360度全景VR视频,更是极具代入感和真实感,热门的全景视频会在百度VR浏览器“热门推荐”频道实时更新,保证了资源的及时与丰富性。比如,当你精神紧张,压力过大,通过360度全景VR视频《放松之旅诺朗加港》观看自然风光,相信能够让你的压力和焦虑得到良好的释放。用VR的方式浏览你每天必刷的网站是怎样的体验?对文艺青年来说,有想象过VR体验看豆瓣友邻的图片是什么感觉?对二次元重度爱好者而言,用VR效果看字幕飘过时的想法是什么?没错,相比较于只有视频和游戏的内容聚合平台,百度VR浏览器最大的特点就是推出了webVR的技术。顾名思义,就是能把普通网站也“VR化”,让网站里的内容也能够获得更好的视听体验,让原来不具备VR属性的视频,也统统都能变成VR。除了这些,百度VR浏览器还通过webVR的技术,加入了全景图片、直播等内容。你从未有过如此沉浸式的游戏体验在网站视频之外,百度VR浏览器还提供了多款国内外热门的VR游戏。对于资深的游戏爱好者和玩家而言,相较于手机游戏和PC游戏的不同,在VR世界里,你仿佛化身为游戏中的一员,当你在各个角度转动寻找目标时,前方或者后面敌人的枪击就快速来袭,或步行在埃及神秘的房间,金字塔等都呈现在你面前,在VR游戏的世界里,每一次跳跃和转身,每一个不同动作的体验都如此真实。对于国内的VR爱好者而言,百度VR浏览器丰富扩展了VR场景体验,而对整个VR行业来说,也推动了VR应用的发展。作为国内第一个推出webVR技术的VR内容平台,百度VR浏览器到底能不能在国内为webVR推出可行性更高的标准,让VR内容入门的门槛更低的同时,最大化扩展VR场景,也是我们大家都一起期待的。2016年是VR的爆发元年,而虚拟现实也被称为下一个新的计算平台、一种营销手段、一种新的媒介、一种新的体验方式、一种新的语言、一个全新的世界。日,深圳市虚拟现实产业联合会将在深圳会展中心召开“最美的境界o最好的未来” 2016o中国o深圳“小宅杯”VR宝贝大赛新闻发布会,揭开VR宝贝大赛的帷幕,而百度VR浏览器也将作为合作伙伴邀请VR爱好者一起全程关注本次比赛。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑、景色,当然也可以四周移动,就像身临其境。
全景图共分为三种:
①球面全景图
& &利用一张全景图围成一个球,自身位置位于球体内。由于图片是矩形,所以最上和最下的缝合处很明显就能够看得出来。
& &球面全景图是最接近人眼的构建模式,若利用多个立面构建,拼接方法繁琐,性能消耗高。
& &因此,本文介绍的是上述通过一张全景图构成的球面全景图。
②立方体全景图
& &一个立方体,有六个面组成,所以就需要六张图片啦。自身的位置位于立方体中间。这也是最常见的全景图构建模式。
③柱状全景图
& &这个则是前两种构建模式的结合版啦。
在浏览器中实现3D全景浏览开发,首先需要几样东西:
①支持WebGL和canvas的浏览器
②Three.js
& &这里就不介绍这个插件了,所以阅读本文需要Three.js简单的基础 O(&_&)O~
& &下载地址:
③photo-sphere-viewer.js
& &这是基于Three.js开发的柱状全景图插件
& &下载地址:
& 像上图那样的360度全景图,最好是左右能够完美拼接的,这样环顾时才自然。
& 现在也有能够生成全景图的工具,这里就不介绍啦。
& 全景图素材站点:
现在开始上代码啦!!!
html部分:
需要一个标签元素做为全景图的容器,并引入所需的两个插件。
初始化插件,创建一个photosphereviewer对象。
其中,前两个选项panorama和container是必须的,其他都为可选项。
然后,3D全景效果就这样实现啦,简单吧。
那接下来就介绍一下配置参数及方法吧。
配置参数介绍
panorama:(必选)全景图的路径。
container:(必选)放置全景图的容器。
autoload:(默认为true)true为自动加载全景图,false为迟点加载全景图(通.过load方法)。
usexmpdata:(默认值为true)photo sphere viewer是否必须读入xmp数据,false为不必须。
cors_anonymous:(默认值为true)true为不能通过cookies获得用户
pano_size:(默认值为null)全景图的大小,是否裁切。
default_position:(默认值为0)定义默认位置,用户看见的第一个点,例如:{long: math.pi, lat: math.pi/2}。
min_fov:(默认值为30)观察的最小区域,单位degrees,在1-179之间。
max_fov:(默认值为90)观察的最大区域,单位degrees,在1-179之间。
allow_user_interactions:(默认值为true)设置为false,则禁止用户和全景图交互(导航条不可用)。
allow_scroll_to_zoom:(默认值为true)若设置为false,则用户不能通过鼠标滚动进行缩放图片。
tilt_up_max:(默认值为math.pi/2)向上倾斜的最大角度,单位radians。
tilt_down_max:(默认值为math.pi/2)向下倾斜的最大角度,单位radians。
min_longitude:(默认值为0)能够展示的最小经度。
max_longitude:(默认值为2PI)能够展示的最大维度。
zoome_level:(默认值为0)默认的缩放级别,值在0-100之间。
long_offset:(默认值为PI/360)mouse/touch移动时每像素经过的经度值。
lat_offset:(默认值为pi/180)mouse/touch移动时每像素经过的纬度值。
time_anim(默认值为2000)全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
reverse_anim:(默认值为true)当水平方向到达最大/最小的经度时,动画方向是否反转(仅仅是不能看到完整的圆)。
anim_speed:(默认值为2rpm)动画每秒/分钟多少的速度。
vertical_anim_speed:(默认值为2rpm)垂直方向的动画每秒/分钟多少的速度。
vertical_anim_target:(默认值为0)当自动旋转时的维度,默认为赤道。
navbar:(默认为false)显示导航条。
navbar_style:(默认值为false)导航条的样式。有效的属性:
& & & & & & & & & & & backgroundColor:导航条背景色(默认值rgba(61, 61, 61, 0.5));
& & & & & & & & & & & buttonsColor:按钮前景色(默认值 rgba(255, 255, 255, 0.7));
& & & & & & & & & & & buttonBackgroundColor:按钮激活时的背景色(默认值 rgba(255, 255, 255, 0.1));
& & & & & & & & & & & buttonsHeight:按钮高度,单位px(默认值 20);
& & & & & & & & & & & autorotateThickness:自动旋转图片的层(默认值 1);
& & & & & & & & & & & zoomRangeWidth:缩放游标的宽度,单位px(默认值 50);
& & & & & & & & & & & zoomRangeThickness:缩放游标的层(默认值 1);
& & & & & & & & & & & zoomRangeDisk:缩放游标的放大率,单位px(默认值 7);
& & & & & & & & & & & fullscreenRatio:全屏图标的比例(默认值 4/3);
& & & & & & & & & & & fullscreenThickneee:全屏图片的层,单位px(默认值 2)
loading_msg:(默认值为Loading...)加载信息。
loading_img:(默认值 为null)loading图片的路径。
loading_html:(默认值 为null)html加载器(添加到容器中的元素或字符串)。
size:(默认值为null)全景图容器的最终尺寸,例如{width: 500, height: 300}。
onready:(默认值为null)全景图准备好并且第一张图片展示出来后的回调函数。
addAction():添加事件(插件没有提供执行事件的方法,似乎是提供给插件内部使用的)。
fitToContainer():调整全景图容器大小为指定大小。
getPosition():获取坐标经纬度。
getPositionInDegrees():获取经纬度度数。
getZoomLevel():获取缩放级别。
load():加载全景图()。
moveTo(longitude, latitude):根据经纬度移动到某一点。
rotate(dlong, dlat):根据经纬度度数移动到某一点。
toggleAutorotate():是否开启全景图自动旋转。
toggleDeviceOrientation():是否开启重力感应方向控制。
toggleFullscreen():是否开启全景图全屏。
toggleStereo():是否开启立体效果(可用于WebVR哦)。
zoom(level):设置缩放级别。
zoomIn():放大。
zoomOut():缩小。
阅读(...) 评论()}

我要回帖

更多关于 全景图片 展示 webvr 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信