js实现3D效果

项目中需要监控机场硬件设施.项目老大交给我一个任务,就是把这个硬件监控起来.想到的以前接触过的3D机房,于是朝着3D方向的不归路越走越远,最后还是做出来了.
这个页面有四个要素,camera,stage,cube,glass.
camera在我理解来就是视角,我的页面中是最外层元素.
然后是stage,stage相当于机场的地板,需要设置 transform-style:preserve-3d,才能显示3D效果.
接着cube是立方体,我把它定义成了js类,六个面组成一个立方体,这样可以'造轮子''了,从机场的闸机到后面的行李提取都是用cube做的.
glass使用css样式实现的,相当于机场闸机的玻璃门和玻璃挡板.

[img]http://dl2.iteye.com/upload/attachment/0128/8022/f3ba3116-79b4-3560-8571-cf43f4f192c3.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0128/8024/cc8652e3-ae3c-3674-b8b6-e2f24dcb5a19.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0128/8026/09259def-e74f-3a4f-9f0e-5c5e98822a2f.png[/img]
cube是直接在js中new出来的.

[img]http://dl2.iteye.com/upload/attachment/0128/8028/e0acbe1c-f2d2-30de-9091-2b28e899c1b1.png[/img]


[img]http://dl2.iteye.com/upload/attachment/0128/8030/e3bebcb1-6374-30cf-a8f2-f9b03c89354b.png[/img]