使用css3d-engine.js编写简单的 360全景h5页面

什么是这里所说的360全景h5页面？查看下面的案例进行了解： 

开发项目：http://game.flyh5.cn/resources/game/wechat/zjh/fangtuo/index.html
案例1：http://cpic18ny1.energytrust.com.cn/
案例2：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc8a2ce35fa3799ea&redirect_uri=https%3A%2F%2Fapi-wx.51h5.com%2Fweb%2Foauth%2Fcallback%2Fid%2Fzhihuipingmu.html%3Fredirect%3Dhttp%253A%252F%252Fevent.ews.m.jaeapp.com%252Foneleaf%252Fwx%252F&response_type=code&scope=snsapi_base&connect_redirect=1&state=af817cf4f82372fbb17733029aebd16e#wechat_redirect
案例3：http://wap.i-h5.cn/hzx_game/dell/index.html?from=groupmessage&isappinstalled=0

我所做的项目是一个展示类的h5营销项目，没有太多的交互逻辑，主要在于那个360场景的编写，其实我也是赶鸭子上架，boos突然丢了一个案例给我研究一下，说会有一个项目进来要做成360旋转效果，我&*￥@%*@￥%@@—￥#￥。

好吧，研究的坎坷历程就略过了吧，我也是在别人的项目基础上做的文章，而且之前也没有写过3d动画，所以只拿一些我研究出来的东西说道记录一下，具体原理我也一知半解，不过使用他写个简单项目应该还是够了。

项目中主要使用的3d动画库为：css3d-engine.js。github为：https://github.com/shrekshrek/css3d-engine
还使用了一个名为jstween的动画库，可以配合css3d-engine.js使用。代码中以JT代替。github为：https://github.com/shrekshrek/jstween

项目过程中使用了PxLoader进行360场景图片等资源的预加载。github为：https://github.com/thinkpixellab/PxLoader

话不多说，让我们一步一步来构建一个简单的360场景动画吧。

C3D.Stage

三维场景，需要首先创建，其他所有显示内容都通过addchild方法放入场景即可。

const anta = new C3D.Stage({
    el: $("#anta")[0]
});

我们选用一个id为anta的一个div作为场景的承载元素。

C3D.Sprite

C3D.Sprite是一个三维显示元素基类，一般作为容器使用，用它来创建一个显示在页面上的元素的容器

const spMain = new C3D.Sprite();
spMain.position(0, 0, -750).update();
anta.addChild(spMain);

创建一个C3D.Sprite容器作为承载所有显示内容的主容器，后续所有的显示内容都添加到这个容器中。并添加这个主容器到场景中。

C3D.Plane

C3D.Plane表示为一个平面，就是一个二维平面，一般用它来创建一个显示元素，也就是场景中所有可以看到的平面都是用它来创建，比如场景中交互的按钮这些，通过创建一个C3D.Plane，并把它添加到C3D.Sprite容器中即可。

ps：刷新相应的dom内容，位置，角度，尺寸，材质等信息只有在执行了update方法后才会被作用到dom节点，具体可以参考github

创建场景背景

场景的背景也是通过一个C3D.Sprite容器来承载，并且显示的背景元素会通过C3D.Plane来创建，这里会配置一些参数，具体看代码：
 

    // 一些参数定义

    // 定义背景图片的个数
    var bg_num &#