打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
3D全景组件——H5制作分享
 

 
 第一部分: 全景图片的拍摄
一、简述
为了降低拍摄成本,我们研究了两种方式:一种初级单反,一种手机;不管用单反和手机,都需要借助【三角架】+【云台】。这是两个必不可少东西;
三角架:主要是用来固定相机、手机的;
云台:主要是用来旋转的,一般的云台360度都是有刻度的;
鱼眼镜头和球面镜头,不是必须,可以尝试,只要有三脚架,云台、手机/相机,即可。

二、拍摄方法
我采用的是每30°一张,拍5组,共60张。拍摄60张,主要是考虑拼接的细腻程度,当然,用了鱼眼镜头后,可以少拍很多。比如12张,24张,都可以。但做全景图时,对接会有一定的问题。
file:///C:/Users/yuting.lei/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif 单反拍摄:
1、拍摄方法
  将单反固定在云台上;
  调整为手动挡,固定曝光度;
  从水平,上斜45°,下斜45°,正上,正下,共5个角度,每个角度间隔30°拍一张,每组12张,共60张照片。
2、注意事项
  固定曝光度的好处,是大家在拼接图片时会更自然;
  向上拍摄时,每张照片之间,最好有固定参考物;
  向下拍摄时,会拍到三脚架,这个后期可以处理。
3、可选拍摄方式
  水平,上斜45°,下斜45°,可以采12张图片,正上面,正下面,如果色调单一,可以拍一张,即可。这是32张处理方案。
  用鱼眼镜头的话,因采景范围较大,可以根据镜头不同,采集少量照片。原则只有一个,相邻照片,必须有重复的部分。
file:///C:/Users/yuting.lei/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif 手机拍摄:
1、拍摄方法
  将手机与蓝牙云台连接;
  将手机横向/竖向固定在云台上,每组照片选择相机横竖状态只能一种,如果横,就都横,如果竖,就都竖;
  手动旋转云台,每30°拍照一次,还是5个圈60张照片。如果拍摄室外,为了防止摄影师的身影进入镜头,用蓝牙拍摄云台就很方便。当设定好角度,摄影师可以走很远,点一下遥控器,即可拍照。
2、手机拍摄的缺点
曝光不均匀,最后拼接出来的全景图,会不自然。
3、拍摄场地的局限和探索
  尽量拍一些静景,容易后期处理;
  需要有一定的距离,视手机、相机的焦距和性能;
  如果拍较狭小的室内,不管手机和相机,需要借助鱼眼镜头,但拍摄车内,一般的手机+普通鱼眼是完成不了的,需要更专业的装备;
  静景中,建议拍摄有规则边缘的物体,如建筑物,不规则的物体,后期处理,会有一定的难度,比如:凌乱的树枝;
  当然,大家如果有性能比较好的单反,可以将拍摄经验,总结一下,也分享出来。
三、总结
好了,第一部分,就这么多。先拍摄取得32张照片,或者60张照片,不管你是用手机,或者相机。第二部,我们就要将这么多照片,用PTGui这款软件,拼接全景图,再将全景图,切成上下左右前后6张图。

第二部分:全景图片的制作


一、简述
认识PTGui, 软件图标
小五用的是汉化版的,有英文trial版的,功能不全,不建议使用。如果从网上找不到好用的版本,也可以跟小五留邮箱,下午可以发下载链接给大家(待补充)
二、PTGui的使用
       PTGui软件功能很强大,但大家不用害怕,操作并不复杂。或者说,我们用不了那么多功能,只用最基础的4、 5 个点就行。
1、加载图像
很容易理解,把我们上面拍摄的60张照片导入进来;只要点击第一个大按钮即可,选择要加载的照片,即可导入成功,不用修改其他选项。
       可以从第二个页签:源图像,来增减想要调整的照片
2、对准图像
此步操作,需要稍微等一小会儿,软件会根据你导入的图片,自动拼接。

       对准图像后,会出现一个“全景编辑器”界面,可以看拼接的模拟效果,你可以拖动,看每个边缘拼接的是否自然。
点即页卡上的数字按钮,可以显示每张图的编号和边界。
很显然,天空的部分,和地面的部分,都聚集在了一起,没有出现在应该出现的部分。
这种情况,小五试了两种办法:1.减少天空和地面的照片数量;2.用单张照片代替;
大家可以编辑整个全景图,也可以单独编辑一张,参考窗口上的菜单提示即可
更细精度调整:使用手动添加“控制点”。选两张临近图片,即有重合的部分,将同一物体在两张照片中,设置控制点,只要左点一下,在右边场景中,同一物体部位再点一下,即可。
记住:是相邻图片,相同物体位置。
增加的手动控制点越多,画面程序拼接越自然。当然,你不加,也没有关系,无非会损失一些品质。如果商用的话,就要精致一些,这里,可能会耗费一些时间。
file:///C:/Users/yuting.lei/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif  可能出现的问题:
  加完控制点后未生效,因为未保存;
  加的控制点,不是同一物体的同一位置,会误导程序的;
第2步,对准控制点,就这么多;接下来,第3步:创建全景图。
3、创建全景图

  设置优化尺寸:选最大尺寸;
  选择输入路径,不多说;
  点击创建全景图按钮;
  一张新鲜出炉的jpg全景图就这样生成了。
  接下来,还有一个步骤,就是切成6张图片

这里面的设置简单说一下,没用过的,第一次一定蒙圈
  进入到“转换到QTVR/立方体”界面后:
  选择要转换的文件,就是刚才我们生成的那张全景图;
  设置输出选项:转换到 立方体表面,6个单独文件;
  输入路径和名称:会显示3的位置,可选择你想要的输入路径,不改即默认输出到源图像的文件夹。
  jgeg品质:如果想清晰一些,就将百分比调大;不过,会带了图片加载慢的问题。小五试的是70%,后来照片又单独处理压缩的,不然一张2M多,对于低端用户打开还是有困难的。
  点击转换,6张照片即切出来了。
4、后期加工
  有黑洞的部分,是小5拿掉了天地,需要用PS处理一下;
  切出的照片,每张大约在3M左右,用PS另存一下web格式,比较合适,大小可以自己看着办,无非就是在清晰度和流畅度上找一个平衡。
好了,第二部分,就是这样

三、总结
第1部分:拍摄照片;
第2部分:制作全景图;
下一部分,即生成3D全景的H5了,这需要有一定的代码基础

第三部分:生成3D全景的H5

一、简述
       不知道大家有没有关注过“H5案例分享”2015年10月20日推过一款案例,是进入明星的化妆间,找篮球的那个。该案例就是运用了6张图拼接全景的方法,具体他用的什么工具,小五不知道。
       只是有点代码基础的前端同学,可以很容易将代码拿到,分析一下。换些图片,即可完成3D全景的前端部分。
       为了这堂课,小五花费了一些时间,把这个案例还原了一下,分享给大家
       后台还做了一个管理后台,可以方便上传图片
       可以增加气泡,链接,可以放置说明文字、广告条、和外链,这样再跟大家的业务相结合,就能做出有一定商业价值的3D全景。
       当然,这个后台需要单独开发,为了这次课程分享,我们团队的小伙伴,项目间歇加塞,开发了一个粗糙版本。
       当然,前端的代码,大家是可以分析和使用的。这个没有什么秘密。
       最后,给大家奉上我刚才讲解用图的3D全景效果。(案列链接2)
二、总结
       小5尝试的这种3d全景方法,相对来说比较简单:1.拍照;2.拼全景,切割成6张图;3.用代码连接这6张图,形成全景。
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
PTGUI使用教程
星空摄影入门教程
使用PTGui制作全景星空照片
双子座流星雨后期大法!手把手教你操作——揭秘APOD大作出炉全程
潮玩VR360°全景拍摄——后期剪辑篇(附带干货)
秒懂PTgui制作全景就是这么简单(3)教学篇
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服