项目中需要监控机场硬件设施.项目老大交给我一个任务,就是把这个硬件监控起来.想到的以前接触过的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轴旋转.右键控制平移.
这是平移和旋转效果图:
目前就这些了,后续还需要继续完善.暂且把这些分享给大家吧.
- 大小: 27.2 KB
- 大小: 23 KB
- 大小: 20.7 KB
- 大小: 30.5 KB
- 大小: 18.9 KB
- 大小: 34.7 KB
- 大小: 30 KB
- 大小: 30 KB
- 大小: 28.8 KB
- 大小: 18 KB
- 大小: 15 KB
- 大小: 18.9 KB
- 大小: 362.9 KB
- 大小: 24.7 KB
- 大小: 27.1 KB
- 大小: 18.5 KB
- 大小: 221.2 KB
- 大小: 287.6 KB
- 大小: 27.6 KB
分享到:
相关推荐
js实现3d效果框架 .
js 实现页面3D效果
js实现的3d效果(很炫+转载),大家可以学习一下。
HTML5 canvas+three.js实现3D效果的月球表面冒烟动画效果源码.zip
JS 实现3D立体效果的首页轮播图:http://blog.csdn.net/libin_1/article/details/50451121
TweenMax.js实现3D效果海面上海鸥飞过场景动画特效源码.zip
HTML5+WebGL+Three.js实现3D效果的麻花和球形之间变形转换动画源码.zip
js实现3D自转相册效果,送给女朋友的惊喜页面,程序员必备! js实现3D自转相册效果,送给女朋友的惊喜页面,程序员必备! js实现3D自转相册效果,送给女朋友的惊喜页面,程序员必备! js实现3D自转相册效果,送给女...
Three.js是一个运行在浏览器中的3D引擎,使用JavaScript编写。它提供了非常多的3D显示功能,可以用来创建各种三维场景,包括摄影机、光影、材质等各种对象。在Three.js中,你可以用它创建各种三维场景,包括建模、...
js实现3D旋转相册效果,程序员的专属浪漫,情人节必备代码! js实现3D旋转相册效果,程序员的专属浪漫,情人节必备代码! js实现3D旋转相册效果,程序员的专属浪漫,情人节必备代码! js实现3D旋转相册效果,程序员...
利用纯JavaScript,实现3D的翻页效果 支持前一页后一页翻页 翻页时有3D效果
原生js和css实现3D波浪效果图
Javascript实现3D标签云的效果
js实现吹泡泡效果,漫天飞舞的彩色泡泡,3D动态效果炸裂! js实现吹泡泡效果,漫天飞舞的彩色泡泡,3D动态效果炸裂! js实现吹泡泡效果,漫天飞舞的彩色泡泡,3D动态效果炸裂! js实现吹泡泡效果,漫天飞舞的彩色...
运用js实现3D效果,点击clickme.html效果,运用大量js效果
JS实现的非常漂亮的3D立体照片墙显示效果
烟囱冒烟效果 使用js模块实现,再threejs实现的3d场景中展示烟囱冒烟效果 适用于three开发的3d场景
基于threejs实现3D爆炸碎片轮播图特效.zip
js实现的3d图像,效果超炫。值得借鉴。