js实现3D效果

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





  cube是直接在js中new出来的.















  我写了一个函数createCube(),onload事件中执行;
 










到这里,3d监控效果图就出来了;



  然后是3D图像的平移和旋转,缩放没有做,左键控制旋转,即围绕y轴旋转.右键控制平移.




 





  这是平移和旋转效果图:






目前就这些了,后续还需要继续完善.暂且把这些分享给大家吧.

评论

2 楼 snowstorm 2018-11-29  

补充下,与后台实时交互使用的websocket,websocket的用法在这里就不详述了.

1 楼 噗噗凡 2018-02-06  

厉害，学习了