整个3D全景所用的相关理论就不多说了，就稍微讲一下本案例用到的相关理论

 

　　相信程序猿们会更加关注代码实现的内容

 

　　这次讲解的demo是用css3DRender来构建一个正方体的全景场景

 

　　想象一下，我们需要做的就是构建一个正方体的盒子

 

　　然后把镜头放在以下这个正方体盒子里

 

　　每个面都贴上我们场景的一个面，那么当镜头转动时看到的就是置身其中的全景

 

　　详细理论的东西以后再说，这次先跑起来一个简单的demo吧

 

　　本教学用到两个库：

 

　　threeJS和基于它的CSS3DRender.js

 

　　代码是从官网上样例上扒下来做了一点调整。

 

　　html这边没什么特别的，首先把每个面放进去，用p把每个面的图片放进去。

 

　　没有用官网demo的实现方式是因为官网是create一个img插入到页面，我们在对每个面添加元素的时候不太方便

 

　　先把六个面定义好，如果要在每个面上加入一些交互的元素，直接在html上添加dom就可以了

 

　　一共就引入了3个js，除了index另外两个都是压缩过的js，不用关心，看一下index.js的实现

 

　　那么很明显这两行代码，字面上的意思就是创建了一个相机，创建了一个场景。

 

　　那这里稍微解释一下这两个类

 

　　以下是官网的解释

 

　　大概意思：

 

　　这是一个模仿人眼的投影模式，它是用于渲染3D场景最常见的投影模式。

 

　　总之这个类就是new一个镜头

 

　　下面是样例代码

 

　　这个类的构造函数接受四个参数

 

　　那么这四个参数具体是什么东西？

 

　　分别表示的

 

　　镜头夹角，宽高比，最近焦距，最远焦距

 

　　接下来，用Scene类创建场景

 

　　以下官方说明

 

　　这东西创建了一个场景，这个场景允许你对某个东西某个位置通过threeJs渲染场景

 

　　创建了场景和相机，我们需要往场景里面放入之前说的正方体

 

　　首先定义好六个面的数据，每个面的位置，3D旋转的旋转角度。

 

　　position三个参数分别对应的x,y,z轴的位置

 

　　因为我选的面宽度是1024px

 

　　所以位置是基于中心点的正负1024/2

 

　　rotation的三个参数分贝对应xyz轴的旋转角度

 

　　Math.PI/2代表90度

 

　　那么这里有一个新出现的类CSS3DObject

 

　　不过这个类不属于官方类，而是我们引用的3DRender库里的类

 

　　没有文档我们看一下代码

 

　　可以看出这是一个继承于THREE.Object3D的类

 

　　将传入的element的postion改为绝对定位，然后加了个被移除时的事件。

 

　　没有定义什么别的特别的东西，那么我们查一下官方Object3D的类

 

　　这个类就是一个定义对象的基本类，其中new的对象包含以下两个属性

 

　　分别表示对象的位置和旋转角度。

 

　　那么for循环就是定义六个对象加入场景中

 

　　好，我们继续

 

　　这是我们引用的库里的类

 

　　这个类的主要功能是根据three中的场景和镜头的相关信息

 

　　使用dom元素和css3D的属性来渲染出来

 

　　在这里只是new了这个类和设置了宽高

 

　　但是CSS3DRender在这里还没有开始渲染页面

 

　　这里的事件绑定就不详细说了

 

　　接下来解析一下渲染时的代码

 

　　requestAnimationFrame（ animate ）;

 

　　这个方法可以根据帧速率触发animate方法。

 

　　这段代码根据现成的（通过手指滑动或鼠标滑动实时更新的）属性值，调整camera镜头的位置

 

　　然后渲染……

 

　　因为render里面的代码比较多，这里就不贴代码了，大概总结一下render做的事情就是

 

　　首先render自己创建一个作为场景的p

 

　　通过传入的scene和camera

 

　　获取其中object在创建时候传入的element信息

 

　　以及后面定义的包括位置，角度等信息

 

　　根据场景中的obj创建dom元素（就是通过dom实现本应在canvas里的东西）

 

　　插入render本身自己创建的场景p中

 

　　当镜头方向变了，获取到的参数就变了，通过传入的对象身上带有的变化的参数改变页面上dom元素的位置。

 

　　达到渲染场景的效果