网页3D：three.js入门

在波波的博客中关于JS方面的内容很少，一方面是由于波波本身在公司工作，没有那么大精力去每天都写大量内容，另一方面我的学习的重心并不在网页前端方面。不过作为一个自己的博客还是希望能够多方面的写一些网站、手机APP开发过程中的东西，尽可能多的丰富这些知识。

随着H5越来越多的被应用到各个领域，3D也越来越频繁的出现在各个H5案例中，今天我们就来讨论一下3D全景的实现。

作为一个入门级的教程，首先我们介绍下全景图的分类。全景图一共分为三个大类：球面、柱状、立方体。

1、球面全景图：

利用一张全景图围成一个球，自身位置位于球体内。由于图片是矩形，所以最上和最下的缝合处很明显就能够看得出来。虽然球面全景图具有和人眼最接近的构建模式，但需要很多个立面才可以构建成一个球体，球面的经纬度坐标无法展开成一个平面贴图，相对于其他方案，性能消耗过高，拼接方法过于繁琐，性能消耗高。

2、柱状全景图：

这个则是前两种构建模式的结合版啦。其实, 粗略一想就可以想到这种实现方法的缺点, 如果我们将拍摄到的全景图贴在一个圆柱的侧面上, 我们站在圆柱中心朝四周看的话, 应该就有全景观察的效果. 不过这样做也有坏处, 也就是我们的头顶跟脚底都是无法看到的区域。

3、立方体全景图：

一个立方体，有六个面组成，所以就需要六张图片啦。自身的位置位于立方体中间。这也是最常见的全景图构建模式。通过比较，显而易见，采用立方体全景图，无论体验还是性能都比较好。

用ThreeJs实现立方体全景图

1、HTML部分：

2、引入JS：

3、核心JS使用流程详解：

在这里波波主要分享的是一个3D场景构建的思路，代码不重要，当这个思路能领悟了，相信我不用对three.js每个函数都写一篇指导教程，大家都可以通过这个思路自由的构建自己的应用。

A、创建场景。场景即是画布，是所有物体object的容器。在最开始的时候对场景实例化，将之后构建的物体都添加到场景中即可。就像我们要拍电影首先要选好场地是一个道理。

B、添加相机。在ThreeJS中, 相机还分为CubeCamera(立方体相机)，PerspectiveCamera(透视相机)以及OrthographicCamera(正交相机)。其中, CubeCamera是创建动态贴图用的，OrthographicCamera创建的照相机不具有透视效果。

在这里, 我们用到的是PerspectiveCamera(透视相机)。 如下图所示， fov是相机视角的夹角，aspect等于相机画幅比例，near和far分别是照相机到视景体最近、最远的距离， 均为正值，且far应大于near。