html5 3d场景设计,打造H5里的“3D全景漫游”秘籍 － 腾讯ISUX

原标题：打造H5里的“3D全景漫游”秘籍 － 腾讯ISUX

近来风生水起的VR虚拟现实技术，抽空想起年初完成的“星球计划”项目，总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍。

QQ物联与深圳市天文台合作，在手Q“发现新设备”-“公共设备”里，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手Q实时观看到世界各地最佳观测点的日食，流星等天体现象。承载整个“星球计划”活动的运营页面，经多方讨论，我们决定尝试3D全景漫游模式的H5运营页进行推广，今天就不详述活动的具体内容，先和大家聊一聊这H5里“3D全景漫游”的制作方法。

先贴一个体验地址(请忽略GIF录屏的卡顿及字体，iOS开启陀螺仪体验最佳)，Page3的宇宙部分-转动手机在模拟的宇宙里搜寻各大行星，就是我们今天要说的基于Html5的3D全景漫游。

要制作全景漫游，首先得有全景图像。全景图像的获取通常是借助鱼眼的全景摄像机的拍摄来完成的，或者是单反相机、鱼眼镜头、云台和三角架的组合。需要按照一个方向旋转360度拍摄一组照片，照片之间要有部分重合的部分，方便进行后期的拼接和融合。在拍好照片后需要将它们无缝拼接在一起，生成的全景图像可分为球面全景图、立方体全景图以及柱状全景图等。(咋们腾讯地图的街景体验，就是最常见的全景漫游技术啦)

没有全景摄像机，也可以通过一些素材站点拿到适合我们项目的全景图。例如：某素材站点

当然，星球计划的背景图是宇宙星际，相对而言是无序的，所以靠视觉设计师进行拼接绘制也是可以的。

而什么是全景漫游呢，全景漫游技术可以让体验者在全景图像构建的全景空间里切换视角的浏览。它是通过拍摄全景图像，再采用计算机图形图像技术构建出全景空间，让使用者能用控制浏览的方向，或左或右、或上或下观看物体或场景，仿佛身临其境一般。与传统的3D建模相比，全景漫游技术制作简单，数据量小，系统消耗低，且更有真实感。故近年来，也是VR技术的一大热门实现手法，用前面的贴图例子来个demo。而在移动端的全景漫游