css3d-engine 介绍
css 3d引擎,为方便工作需要制作
优势:因为是基于div+css3实现,相对canvas webgl拥有更好的平台兼容性。
劣势:渲染 性能 相比canvas webgl要弱,只适合创建较小的三维面片场景。但是只有14k,相比那些动辄300-400k的大型3d库,这是个非常小巧实用的辅助 支持 库。
类
C3D.Object
三维元素基类,拥有如下 方法 :
设置位置
.x;
.y;
.z;
.position(x,y,z);
增量移动
.move(x,z);
设置旋转中心
.originX;
.originY;
.originZ;
.origin(x,z);
设置旋转角度
.rotationX;
.rotationY;
.rotationZ;
.rotation(x,z);
增量旋转
.rotate(x,z);
设置缩放比
.scaleX;
.scaleY;
.scaleZ;
.scale(x,z);
设置尺寸
.width;
.height;
.depth;
.size(x,z);
设置材质(div的background相关的几种 属性 )
.material({image:'',color:'',position:'',size:'',repeat:'',origin:''});
设置可见性
.alpha;
.visible;
.visibility({visible:true,alpha:1});
设置滤镜(css3滤镜:grayscale,blur,saturate,sepia,hue-rotate,invert,bright nes s,contrast,opacity)
.filter({filter-type:p ara ms});
设置 名称 (当该元素有 名称 的话,被addChild 添加 进入到别的元素时,可以直接用元素的 属性 方式访问,比如 名称 为'b1'的元素被加入到 名称 为'a1'的元素,之后就可以直接用a1.b1获得该元素.反之,被removeChild移除时也会 删除 绑定的 属性 .)
.name(string);
添加 删除 子节点
.addChild(object3D);
.removeChild(object3D);
刷新相应的dom 内容 ,位置,角度,尺寸,材质等信息只有在执行此命令后才会被作用到dom节点,以正常 显示 。
.update();
刷新尺寸
.updateS();
刷新旋转中心
.updateO();
刷新位置,角度
.updateT();
刷新材质
.updateM();
刷新可见性
.updateV();
刷新滤镜
.updateF();
移除自身,从场景中移除
.remove();
拥有如下 属性
parent 父节点
children 子节点数组
C3D.Sprite
三维 显示 元素基类,继承自Object3D,是其他所有 显示 元素的基类。 一般用于作为容器使用,自身只会刷新位置,角度,缩放信息。没有高宽深的体积信息。拥有如下 方法 :
绑定事件
.on();
解除绑定事件
.off();
设置材质信息,在Sprite3D中,因为没有体积,所以color,images都是无效的,只有alpha会起作用。
.material({color:'#ff0000',images:"",alpha:1});
设置鼠标状态,设置为true就是按钮状态。
.buttonMode(bool);
C3D.Stage
三维场景,需要首先创建,其他所有 内容 都通过addchild 方法 放入场景即可。
C3D.Camera
摄像机,最基本的3D摄像机,场景创建时 自动 创建,通过stage.camera 属性 获取 。
C3D.Plane
平面,顾名思义。
C3D.Cube
立方体,顾名思义,指定材质时可以 添加 6面的 图片 定义。
eg.{front:"",back:"",left:"",right:"",up:"",down:""}
其他全局 方法 :
C3D.getRandomColor();
C3D.rgb2hex();
C3D.hex2rgb();
C3D.create(obj);
此 方法 非常有用,可以帮助 快速 创建场景.
实现案例:
http://shrek.imdevsh.com/show/drose/
http://show.im20.com.cn/bbcny/
http://shrek.imdevsh.com/show/crazylight/
http://show.im20.com.cn/zwj/
GitHub: https://github.com/shrekshrek/css3d-engine
网站描述: css 3d引擎,为方便工作需要制作
css3d-engine官方网站
官方网站:
如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。