原标题：制作H5里的“3D全景漫游”秘籍-腾讯ISUX
最近的虚拟现实技术让我想起了年初完成的“星球计划”项目，总结文章将与大家分享基于Html5的3D全景漫游秘籍。
QQ物联与深圳市天文台合作，在手q“发现新设备”-“公共设备”上，连接QQ物联摄像头为用户提供2016年天体大事件的直播，大家可以通过手q实时观看世界各地最佳观测点的日食、流星等天体现象登载了“星球计划”活动的整个运营页面，经过多方讨论，我们决定尝试推广3D全景漫游机型的H5运营页面。 今天不详细说明活动的具体内容，先和大家谈谈这个H5的“3D全景漫游”的制作方法吧。
事先贴上体验地址。 (请无视GIF录像画面的卡顿和字体。 iOS打开陀螺仪体验是最好的。 ) Page3的宇宙部分-转动手机在模拟的宇宙中寻找各行星，就是我今天要说的基于Html5的3D全景漫游。
要创建全景漫游，首先需要全景图像。 全景图像的获取通常通过鱼眼的全景相机的拍摄来进行。 或者是单反相机、鱼眼镜头、云台、三脚架的组合。 需要单向旋转360度拍摄一组照片，照片之间有部分重叠，便于后期拼接和融合。 拍照后，需要把它们无缝地连接起来。 生成的全景图像分为球面全景、立方体全景、柱状全景等。 如何腾讯地图的街景体验是最常见的全景漫游技术。
即使没有全景相机，也可以从几个素材网站获得适合我们项目的全景图。 例如，某个素材网站
当然，行星计划的背景图是宇宙星际的，相对无序，所以也可以用视觉设计师连接起来画。
什么是全景漫游呢？ 全景漫游技术允许体验者在由全景图像构建的全景空间中切换视角浏览。 拍摄全景图像，利用计算机图形技术构建全景空间，用户可以控制浏览的方向，在左、右、上、下观看物体和场景，看起来就像在那里一样。 与传统的3D建模相比，全景漫游技术制作简单，数据量少，系统消耗低，更具真实感。 因此，近年来，也是VR技术的一大热门实现方法，使用先前的映射例子以demo为例。 移动端的全景漫游可以将陀螺仪联系起来，增强临场感。
在项目初期，预先研究了几种全景漫游制作方案。 目前最常用的全景漫游制作工具是Pano2vr Krpano，使用Flash、QuickTime，根据Java、js等其他方式制作了全景漫游，通过事先研究发现的方案的优缺点
在这里顺便说一下，目前最常用的全景漫游创建工具是Pano2vr Krpano。
)1) Pano2vr操作简单、功能少但非常实用，可以通过“全景图像导入-交互式热点设置-微调-导出”直接生产flash、html5、Quicktime等格式。
Pano2vr最适合和快速满足仅用于PC、iOS的需求，但对Android功能的支持不够。
) Krpano，功能强大完善，各平台兼容性高，可扩展性强，能承载各类VR场景的特效。 但是，它是一个独特的体系，需要遵循Krpano xml的这种编程语言，没有gui的软件界面，初学者手和以后的维护成本较大，生成全景漫游专家，但会影响加载速度、内存使用量但是，如果想做高级的、个性化的、个性化的全景漫游项目，Krpano是不二之选。
但是，这两种工具都需要购买许可证代码才能商用，而不是免费的。
(3) Three.js是Github的开源项目，https://github.com/mrdoob/three.js，官网： http://threejs.org/
看了同行的说明，说只要理解为Three js就可以了。 Three表示3D的意思，js表示java的意思，所以three.js在使用java写3D程序的意义上，非常坦率和清晰。 由于是用java语言编写的，当然给该方案带来了高扩展、高兼容性、低开发成本、高性能和免费的几大好处。
)4)根据Flash、QuickTime、Java、js等其他方式在此不再详细说明，但大致的利弊比较请参考上表(具体评价请参考。 软件版本的更新可能有各方面的升级。
若要在Three.js中创建物体并将其渲染到网页，必须构建三个内部版本：“场景”(scene )、“摄影机”(camera )和“渲染器”(render )。
(1)场景(场景)。
是画布，是所有物体对象的容器。 首先实例化场景，然后将构建的物体添加到场景中即可。
(2)照相机(照相机) ) )。
用户通过相机观看场景下的3d场景。 three.js包括正交投影摄像机(Orthographic Camera )和透视投影摄像机(Perspective Camera )两种，包括从模拟人看物体的方式
来选，透视投影照相机更适合。如下图所示，fov是相机视角的夹角，aspect等于相机画幅比例，near和far分别是照相机到视景体最近、最远的距离，均为正值，且far应大于near。(3)渲染器(renderer)
渲染器是用来设定渲染的结果会在页面的什么元素上面呈现，以及按什么规则来渲染。
在Three.js中，场景是容器，把我们星球计划的星星们放置在构建的3D场景中的不同位置；相机对着下场景拍摄，拍摄结果通过渲染器实时的绘制在我们的浏览器上。
(4)构建宇宙并置入场景中
定义了这三大元素之后，下一步，就是构建我们的星球计划所需的宇宙了。前文有提到，全景图像可分为球面全景图、立方体全景图以及柱状全景图。
虽然球面全景图具有和人眼最接近的构建模式，但需要很多个立面才可以构建成一个球体，球面的经纬度坐标无法展开成一个平面贴图，相对于其他方案，性能消耗过高，拼接方法过于繁琐；而柱形全景图的垂直视野小，不好做顶部底部的俯仰视角。我们选定了最常见的立方图全景图来构建我们的3D场景。
立方体全景图有6个面，我们需要定义每个面贴图的背景图片，3D位置，旋转角度(默认的6个面都是朝着我们的，我们需要定义朝坐标轴的各个方向做90度的旋转，才可以搭建成一个立方体)。
然后添加到THREE.Object3D 的数组中，这样我们就在场景中构建好了一个3D的宇宙空间。
这里，考虑到星空背景主要为了氛围烘托，我们将6个面的贴图减少成2个，以此缩减了资源文件的大小，如下图所示。
(5)渲染
这里我们用的是Threejs的 实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面animate中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让animate()再执行一次，就形成了我们通常所说的渲染循环 了。
通过上面这些步骤，我们就构建好这个3D的宇宙空间了。
(6)构建星球放置在宇宙中
一期的星球计划中，需要增加8颗星球，为了避免画面过于拥挤，星球们被分散定位在了6个面上。之前我们定义宇宙六个面的时候给了每个面一个固定的section id，通过简单的js 我们可以往平面中加入星球的DOM结构。
因此也可以很轻松的利用CSS给这些星球定位及增加个性的动画效果，这里要特别注意，不要增加阴影等耗内存特别大的动画效果，它们是Crash超帅的睫毛。
‘
(7)绑定陀螺仪
最后一步，将全景漫游绑定陀螺仪，这里涉及到需要对陀螺仪事件做个保护代码，判断机器是否支持陀螺仪。完成以上几步，既可以实现一个在移动端的全景漫游啦。
(8)其他
在项目完成的初期，对部分安卓机的内存消耗还是过大，为此在完成项目之后继续尝试了一些优化工作，包括 缩减宇宙的尺寸，合并全景贴图，禁用陀螺仪，预加载和懒加载，星球CSS3动画缩减，资源文件深度压缩等工作，但还是无法避免在内存不足的安卓机下存在Crash的风险，为保证项目的稳定上线，退而求其次对安卓机做了兼容版的体验，预期在后续的项目迭代中再优化页面在安卓下的表现，实现全平台的体验统一。
最后，仅以此文总结在移动端构建3D全景漫游的试水总结，该尝试基本上能够满足项目的需求，但在性能优化，细节完善上还继续打磨，希望能对有兴趣的小伙伴带来一些帮助^^。
感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。
注明出处格式：腾讯ISUX (https://isux.tencent.com/3d.html)返回搜狐，查看更多
责任编辑：