html5360全景,html 360全景
微信里面的360度全景是怎么做到的
微信的360°全景是html5格式的动画,通过3D自动成像系统可以实现。具体方法为先用3D自动成像系统生成产品360度全景html5格式的动画,之后把该动画上传至FTP服务器并导出链接地址,微信上打开此链接地址便能分享至朋友圈。
网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都定制网页设计,高端网页制作,对砂岩浮雕等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业成都网站营销优化,H5建站,响应式网站。
如何制作一个360度全景
360全景不是凭空生成的,要制作一个360全景,我们需要有原始的图像素材,原始图像素材的来源可以是:
A、在现实的场景中,使用相机的全景拍摄功能得到的鱼眼图像
B、通过建模渲染得到的虚拟图像
下文中的表格对比了在不同的设备、拍摄机位、拼合模式、拍摄难度下所能获得到的鱼眼图像
要拍摄全景素材我们需要用到一些专业设备,如下:
数码单反相机
360全景拍摄硬件配备-数码单反相机
首先让我们来认识一下什么是数码单反相机。说白了,数码单反相机就是使用了单反新技术的数码相机。作为专业级的数码相机,用其拍摄出来的照片,无论是在清晰度还是在照片质量上都是一般相机不可比拟的。这些都是单反技术成就了数码单反相机的高性能。单反,也就是单镜头反光。采用这种技术的照相机只有一个镜头,这个镜头既负责摄影也用它来取景。这样一来就能基本上解决视差造成的照片质量下降的问题。而且用单反相机取景时来自被摄物的光线经镜头聚焦,被斜置的反光镜反射到聚焦屏上成像,再经过顶部起脊的“屋脊棱镜”反射,摄影者通过取景目镜就能观察景物,而且是上下左右都与景物相同的影像,此取景、调焦都十分方便。在摄影时,反光镜会立刻弹起来,镜头光圈自动收缩到预定的数值,快门开启使胶片感光;曝光结束后快门关闭,反光和镜头光圈同时复位。这就是相机中的单反技术,现在的数码相机采用这种技术后就成为了专业级的数码单反相机。
【数码单反相机对于拍摄全景的作用】
从理论上来说,数码单反相机和传统单反都可以使用,但是使用数码单反相机得到的影像文件可以直接使用,而传统相机需要使用胶卷,拍摄之后要冲洗和扫描,因此推荐使用数码相机。例如NIKON的D90、D300s等,CANON的EOS5D、450D和1DS等相机。 除此之外,数码单反相机的一个很大的特点就是可以交换不同规格的镜头,这是单反相机天生的优点,是普通数码相机不能比拟的。而在全景拍摄过程中,恰好需要根据不同型号的相机来搭配不同的鱼眼镜头。另外,现在单反数码相机都定位于数码相机中的高端产品,因此在关系数码相机摄影质量的感光元件(CCD或CMOS)的面积上,单反数码的面积远远大于普通数码相机,这使得单反数码相机的每个像素点的感光面积也远远大于普通数码相机,因此每个像素点也就能表现出更加细致的亮度和色彩范围,使单反数码相机的摄影质量明显高于普通数码相机。
【微信管家推荐设备】
佳尼康全画幅系列尼康D700 尼康D3S 尼康D3X
尼康APS画幅系列尼康D300S 尼康D90 尼康D7000 尼康D3100 尼康D5100
佳能全画幅系列Canon 5D Mark II
佳能APS画幅系列佳能7d 佳能60D 佳能600D 佳能550D 佳能1100D
其他型号相机Fujifilm FinePix S2 Pro Fujifilm FinePix S1 Pro Sigma SD9 Kodak DCS760
以上型号为主流型号
鱼眼镜头
360全景拍摄硬件配备-鱼眼镜头
鱼眼镜头是一种焦距极短并且视角接近或等于180°的镜头。16mm或焦距更短的镜头.它是一种极端的广角镜头,“鱼眼镜头”是它的俗称。为使镜头达到最大的摄影视角,这种摄影镜头的前镜片直径且呈抛物状向镜头前部凸出,与鱼的眼睛颇为相似,“鱼眼镜头”因此而得名。鱼眼镜头属于超广角镜头中的一种特殊镜头,它的视角力求达到或超出人眼所能看到的范围。因此,鱼眼镜头与人们眼中的真实世界的景象存在很大的差别,因为我们在实际生活中看见的景物是有规则的固定形态,而通过鱼眼镜头产生的画面效果则超出了这一范畴。
【鱼眼镜头在全景拍摄中的地位】
鱼眼镜头是一种超广角镜头,一般的定义是视角达到180度的镜头就称之为鱼眼镜头。在135画幅的相机上,16mm的镜头就可以达到180度的视角,所以我们长久以来把焦距16mm以下的镜头都称为鱼眼镜头。鱼眼镜头最大的作用是视角范围大,这为近距离拍摄大范围景物创造了条件;且鱼眼镜头具有相当长的景深,有利于表现照片的长景深效果。 一个360度的全景图用鱼眼镜头来拍摄制作,只需要拍摄几张就可以了,加上使用了数百万像素的单反数码相机,我们可以轻易的将图像导入全景拼合软件,能很方便的生成一张360度的高清晰全景。
【微道通推荐的鱼眼镜头】
适马8MM鱼眼镜头在35mm全幅面数码DSLR和传统SLR相机上,涵括180°视角能产生出超现实影像的圆型画面.适合的接环有: 适马、佳能、尼康索尼、宾得
该镜头是尼康的首只鱼眼镜头,专用于数码单镜反光相机,这也是首次全画面覆盖 180°范围。10.5毫米焦距的超广角镜头令数码相机的画角范围相当于一部35毫米135 格式的相机连接上16毫米鱼眼镜头所拍摄的角度。该镜头主要用于尼康 DX 格式数码单镜反光相机,令用家能捕捉独特的影像效果。
【等效焦距】
数码相机镜头的焦距总是以135胶片相机的镜头作为参照物的,数码相机由于其感光面(CCD或CMOS)的尺寸是随相机不同而不同(135相机的感光面是固定不变的)。如果以相机镜头的真实焦距是难以比较不同相机的拍摄范围的,所以都换算到等价的135相机的镜头焦距,然后才进行比较,换算得到的焦距就是等效焦距。 135胶片相机都是使用上图中所示的35mm胶片,而数码相机的CCD/CMOS尺寸往往都相对较小。配合同样的镜头,数码相机的视角要比135相机小,视角的减小可以等同于焦距的增长(视角和焦距成反比)。 有这样一个简单的方法计算数码相机的变焦系数。例如Nikon D40的CCD尺寸为23.7 x 15.6 mm(这个尺寸可以从相机参数中获得),我们用35mm胶片的成像面的宽36mm除以Nikon D40的CCD的宽23.7mm,得到的值就是变焦系数1.5。当我们把8mm的鱼眼镜头加在Nikon D40上时,这个鱼眼镜头的等效焦距就是8*1.5=12mm。Nikon 数码单反相机的变焦系数大多在1.5,而Canon的EOS系列大多为1.6。在Nikon或者Canon的数码相机上,这两款镜头的等效焦距大约为16mm和12mm。不同的焦距拍摄得到的图像也是截然不同的。
【不同鱼眼镜头拍摄出来的效果】
全景云台
360全景拍摄硬件配备-全景云台
全景云台:是区别于普通的相机云台的高端拍摄设备,如JTS-Rotator,Manfutu 303SPH此类云台都属于全景云台,如左图所示为JTS-Rotator。称其为全景云台的主要原因,是因为此类云台都具备两大功能:1.可以调节相机节点在一个纵轴线上转动;2.可以让相机在水平面上进行水平转动拍摄;从而达到使相机拍摄节点在三维空间中的一个固定位置进行拍摄,保证相机拍摄出来的图像可以使用造景师软件进行三维全景的拼合。
【全景云台对于拍摄全景的作用】
云台就是承载相机等拍摄设备的一个装置,全景云台则是专门为拍摄全景而用的云台。全景云台的关键作用就在于将镜头节点固定在了云台的旋转轴心上,这样就可以保证在旋转相机拍摄的时候每张图像都是在一个点上拍摄,拼合的全景图就会很完美。
【全景云台的工作原理】
首先,全景云台具备一个具有360度刻度的水平转轴,可以安装在三脚架上,并对安装相机的支架部分可以进行水平360度的旋转;其次,全景云台的支架部分可以对相机进行前面的移动,从而达到适应不同相机宽度的完美效果,由于相机的宽度直接影响到全景云台节点的位置,所以如果可以进行调节相机的水平移动位置,那么基本就可以称之为全景云台;
【当前主流的全景云台】
【全景云台的操作】
以杰图定制云台JTS-Rotator SPH为例
1. 首先将云台的转轴及支架部分安装于三脚架之上如图所示。
2. 将扩装板(左图所示的)与数码单反相机进行安装(右图所示)。
3. 将数码单反相机安装至支架上(下图所示)。
4. 安装后的效果(下图所示)。
三脚架
360全景拍摄硬件配备-三脚架
三脚架的作用无论是对于业余用户还是专业用户都不可忽视的,他的主要作用就是能稳定照相机,以达到某些摄影效果。最常见的就是长曝光中使用三脚架,用户如果要拍摄夜景或者带涌动轨迹的图片的时候,曝光时间需要加大,这个时候,数码相机不能抖动,则需要三脚架的帮助。三脚架的选择也有很多,购买三脚架其实主要希望角架能为一些拍摄情况提供稳定的拍摄状态,不过有很多情况会导致三脚架产生不稳定,例如本身使用的是重量较轻的三脚架或所谓的便携式三脚架、在开启角架时出现不平衡或未上钮的情况,又或者在正式使用时过分拉高了中间的轴心杆等,都会使角架角晃动。
【三角架对于拍摄全景的作用】
由于需要保证节点位置的不变,全景拍摄对稳定性的要求非常高,所以一个稳定的三脚架也很重要。 建议选择能承受一定重量且材料强度较高的三脚架,并且该三脚架必须支持云台的装卸,因为拍摄全景的时候必须使用到专用的全景云台,而不是家用的普通云台,所以云台的可装卸也是必须符合的。
【三角架的分类】
三脚架按照材质分类可以分为木质、高强塑料材质,合金材料、钢铁材料、碳纤维等多种。最常见的材质是铝合金,铝合金材质的脚架的优点是重量轻,坚固。最新式的脚架则使用碳纤维材质制造,它具有比铝合金更好的韧性及重量更轻等优点,常背着脚架外出拍照的人对于脚架的重量都很重视,希望它能愈轻愈好。按最大脚管管径分类可分为32mm,28mm,25mm,22mm等,一般来讲,脚管越大,脚架的承重越大,稳定性越强。
【微信管家推荐三脚架】
最后我们来看看如何使用图片素材来生成360全景图片
第一步:拍摄全景图原始素材
由专业的摄影师使用专业相机、鱼眼镜头以及三脚架拍摄汽车、房间或者其他需要360全景展示的对象照片
我们来看下备用的三张原始素材
第二步:使用“PTGui Pro”软件合成全景图片
下载“PTGui Pro”软件并安装,然后打开软件:
根据提示,点击“加载图像”,将拍摄的全景图原始素材导入,如下图:
----------
接下来点击“对准图像”
如果图像拍摄的位置准确,软件会直接进入到全景图编辑流程
通常,这里我们不要对图片进行改动,直接关闭编辑器进入下一步“创建全景图”
而有时候图像拍摄的不那么准确,那么我们需要通过手动的方式来对图片进行调整
如图:
我们需要比对左右的2张图片,找到图像上重合的点(至少3个点)来进行标记
如图:
在上图我们一共找了若干个两张图片重合的点并作了标记,如此这般,需要对全部有可能有重合的图片都至少标记3个“控制点”。
----------
调整完图像之后,我们可以创建全景图了
设置输出的文件目录,点击“创建全景图”,我们就获得了加工好了全景图片。
来看下我们得到的全景图片:
这个图片就是所谓的“全景图片”了,看得很晕吧,没关系,还只是半成品,通过第三步我们将进一步加工这张图片以生成效果精美的360全景展示效果
----------------------------------------
第三步:使用“Pano2VR”软件实现360全景效果
下载“Pano2VR”软件并安装,然后打开软件:
在上图中,点击“选择输入”,将第二步生成的全景图片导入进去;同时点击“新输出格式”的下拉框,选择“HTML5”选项,然后点击“增加”按钮
如图
点击增加按钮后得到
设置立方体面片尺寸为700
设置输出文件的输出目录后,点击确定,就开始生成360全景效果了
打开输出目录我们看到
此时,浏览器会自动打开上图中的.html文件,360全景效果就可以被欣赏到了
请记得将“images”目录下的6张图片通过微信管家后台上传全景图片的位置上传到微信管家的服务器,您就可以通过手机端来查看360全景效果了
如何制作一个360度全景图
1、首先用手机拍照时,注意要原地不动绕手机为中心对四周拍照,拍照的数量不少于8张。每张图片和上一张图片要有20%是重合的这一点很重要。
2、把照片拍好后放到电脑D盘名为 01文件夹。然后打开PanoramaStudio 3 Pro点创建全景图。
3、点import导入照片注意顺序要依次导入图片。
4、点align对齐安装360度环绕式对齐。
5、点Render裁切图片,尺寸大小可以先默认。
6、最后点击Save保存,保存为可以互动交互的360度环绕式的网页看图模式。
7、设置保存路径点击Save就完成了。
8、最后打开保存目录就可以打开0807.html文件预览全景图了。
当前名称:html5360全景,html 360全景
网页地址:http://ybzwz.com/article/dsephje.html