Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

fahcode/css3d-engine

Open more actions menu
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css3d-engine

css 3d引擎,为方便工作需要制作

具体使用请看案例 demo:http://shrek.imdevsh.com/demo/css3d/space.html

##类 C3D.Object
三维元素基类,拥有如下方法:
设置位置
.x;
.y;
.z;
.position(x,y,z);
增量移动
.move(x,y,z);

设置旋转中心
.originX;
.originY;
.originZ;
.origin(x,y,z);

设置旋转角度
.rotationX;
.rotationY;
.rotationZ;
.rotation(x,y,z);
增量旋转
.rotate(x,y,z);

设置缩放比
.scaleX;
.scaleY;
.scaleZ;
.scale(x,y,z);

设置尺寸
.width;
.height;
.depth;
.size(x,y,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://drose6.adidasevent.com/
http://show.im20.com.cn/bbcny/
http://crazylight.adidasevent.com/

欢迎研讨。QQ:274924021

  • VERSION: 0.6.0 DATE: 2015-12-2

  • VERSION: 0.5.0 DATE: 2015-11-21

  • VERSION: 0.4.0 DATE: 2015-09-15

  • VERSION: 0.2.0 DATE: 2015-01-03

  • VERSION: 0.1.0 DATE: 2014-11-20

About

css 3d light engine. very easy to use. 12k

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.3%
  • HTML 15.7%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.