css3d-engine

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,brightness,contrast,opacity)

.filter({filter-type:params});

设置名称(当该元素有名称的话,被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

官方网站：