当前位置:首页 » JavaScript技术

js实现3D效果

2018-02-05 17:07 本站整理 浏览(28)

项目中需要监控机场硬件设施.所以项目老大交给我一个任务,就是把这个硬件监控起来.这个咋办呢?俺想到的以前接触过的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轴旋转.右键控制平移.

 


  这是平移和旋转效果图:


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