本文来自飞猪前端同学@甜虾，教你用 N 种方式用 JS 实现一个 360 全景效果。

360 全景浏览是一种性价比很高的虚拟现实解决方案，给人一种全新的浏览体验，让你足不出户就能身临其境地感受到现场的环境。该技术被广泛地应用在房产、酒店、家居等领域。在互联网订房已经普及的时代，在网站上用全景展示酒店宾馆的各种餐饮和住宿设施，是吸引顾客的好办法。利用网络，远程虚拟浏览宾馆的外型、大厅、客房、会议厅等各项服务场所，展现宾馆舒适的环境，给客户以实在感受，促进客户预定客房。在酒店大堂提供客房的全景展示，再也不用麻烦客户在各个房间会场穿梭，就能观看各房间的真实场景，更方便客户确认和挑选客房，进而提高效率，用户体验更胜一筹。

下面我们使用三种方法讨论一个 360 全景的实现。

利用 CSS 中的变换、旋转等属性就可以实现一个 360 全景。实现的基本思路如下：

下面我们尝试使用 div 做出一个 3D 立方体：

写出 6 个面：

perspective 指定观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果（近大远小原理）。transform-style 指定其为子元素提供 2D 还是 3D 的场景。 如下图，高度为 600px 的元素，距离 z=0 的屏幕 300px，视角与屏幕距离 1000px，根据相似三角形的原理，可以计算出该元素在屏幕上的投影高度为 857px，即实际我们看到的元素高度。

关于这个属性的详细讲解可查看css3 系列之详解 perspective。

写出基本定位

旋转各面，使“三对”面互相垂直，达到如下效果

结果如下图

貌似看不出怎么变换的？我们将以上重合的两个面的旋转角度稍微调整下，就可以更直观地看出效果：

各面继续向两侧位移

整个过程可用下图表示：

最终效果：

通过调整容器样式的 perspective 属性值，将视角放置在立方体中。将每个面的尺寸放大，添加上全景图切出的 6 面图，添加上鼠标事件，便可实现 360 全景效果。

扫码看效果：

Three.js 是一款运行在浏览器中的 webGL 引擎，我们可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，利用 Three.js 我们可以轻松地实现各种想要的几何体。 上面的方案中，我们用 CSS3 “拼”出了一个立方体，而 webGL 中立方体等各种几何体是最常见的。我们可以利用 Threejs 中的立方体实现全景图功能，把立方体当成天空盒子，将无缝衔接的图片贴上，看起来就像在一个场景中，相机一般放置在中央，只要离边缘足够远就看不出是立方体，但如果超出边界就能看到他们。 下面是简单的实现过程：

初始化一个立方体几何，给材料上色，便得到了一个立方体：

将立方体的纹理颜色换成图片纹理：

将 6 张全景图片替换掉上面相同的纹理：

图片加载的顺序是正 X(px.jpg)，负 X(nx.jpg)，正 Y(py.jpg)，负 Y(ny.jpg)，正 Z(pz.jpg)和负 Z(nz.jpg)，将他们分别赋给 6 个材质的贴图，作为立方体 skyBox 的材质。

因为相机在 skyBox 的内部，而内部的面不会显示，所以要将 X 轴或者 Z 轴的放大倍数变为负数，这样才能看到内部，scale.z=-1 时相当于将 Z 轴正向的面移到 Z 轴负方向上。

进一步优化体验：

扫码看效果：

pannellum 是一个轻量级、免费、开源的基于 webGL 的全景播放器。支持多种投影方式、支持热点、支持漫游、视频等，且文档清晰明了、简单易用、API 比较丰富，易于功能扩展。 使用：

扫码看效果：

基于 pannellum 我们封装了一个 360 全景容器组件 cube，支持了 pannellum 的所有配置，支持了立方体投影和球型投影两种方式、场景切换、陀螺仪效果等。目前该组件已应用在飞猪酒店详情中。 使用：

扫码看效果：

以上的实现全部是利用立方体实现的，除此之外，我们还可以使用圆柱体投影的方式，three.js 和 pannellum 都支持这种方式。 three.js 中：

pannellum 中：

页面和代码可参考 webgl_panorama_equirectangular 球型全景和立方体全景两种方式比较起来各有自己的特点，比如：

飞猪酒店详情中，服务端对这两种方式都提供了图片资源，但在使用球型全景的方式时少数酒店上传的图片过大，导致部分手机上组件加载资源出错，所以最终决定采用立方体的方式（）。

krpano 是一款较专业的全景引擎平台。目前市场中较大的全景平台大部分都用了 krpano 。但由于它用法较复杂，有一定的学习成本，需要掌握其使用的 XML 的各种配置、功能较多较重且是收费的，对于酒店详情的简单的业务场景来说有点重了，所以权衡之后没有选择它，而是选择了相对轻量的 pannellum。 使用：

扫码看效果：

本文叙述了实现 360 全景功能 4 种不同的方案，包括：CSS3、Three.js、pannellum 和 krpano，在基于 webGL 的方案中，介绍了两种主要的投影方式：立方体投影和球型投影，并给出了 demo 代码和页面，推荐了基于 pannellum 开发的 360 全景容器组件， 如有错误，欢迎指正。