a lightweight and fast 3d css library.md,just 20KB, gzip:6.4 KB!!!
- 安装
typescript:npm install -g tsc - 安装
uglify:npm install -g uglify - 编译
npm run build
npm install c3.js
CDM
var c3 = require('c3')
AMD
define(['c3'],function(c3){})
ES6
import c3 from 'c3'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>voxel.css</title>
<link rel="stylesheet" href="css/voxel.css"></link>
</head>
<body>
<script src="c3.js"></script>
<script type="text/javascript">
// your js
</script>
</body>
</html>// 创建舞台
var stage = new c3.Stage(window.innerWidth,window.innerHeight)
// 挂载舞台到页面,元素
stage.attach('body')
// 添加平面
var plane = new c3.Plane(width,height,zIndex)
// 添加立方体
var cube = new c3.Cube(xWidth,yWidth,zWidth)
// 添加分组
var group = new c3.Sprite()
// 添加多面体
var cylinder = new c3.Cylinder(width,height,number)
// 材质
var material = new c3.Material()
// 添加材质
cylinder.material = material
// 显示对象加到舞台中
stage.addChild(plane)c3.js的顶级对象。框架内所有对象的基类，为对象实例提供唯一的hashCode值。
- hashCode:string [只读] 返回此对象唯一的哈希值,用于唯一确定一个对象
Display 类是可放在显示列表中的所有对象的基类。该显示列表管理运行时中显示的所有对象。
- visible:boolean 显示对象是否可见
- backface:boolean 显示对象背面是否可见
- className:string 显示对象class类名
- opacity:number 显示对象的透明度
大部分方法支持链式调用，其中position,rotate,translate,scale参数其中一个为字符串时表示变化值，如rotate('+0.5',0,0) => rotate.x += 0.5
css(param:Object):Display为当前显示对象设置样式 如css({color:'red'})on(type:string,cb:Function[,capture:boolean]):Display为显示对象添加事件once(type:string,cb:Function[,capture:boolean]):Display为显示对象添加事件,只触发一次off(type:string,cb:Function[,capture:boolean]):Display删除对象中删除侦听器position(x:number|string,y?:number|string,z?:number|string):Display设置显示对象的位置getPosition():Point获取显示对象的位置size(x:number|string,y?:number|string,z?:number|string):Display设置显示对象的尺寸和显示优先级getSize():Point获取显示对象的尺寸rotate(x:number|string,y?:number|string,z?:number|string):Display设置显示对象的旋转getRotate():Quaternion获取显示对象的旋转四元数scale(x:number|string,y?:number|string,z?:number|string):Display设置显示对象缩放getScale():Vector3D获取显示对象的缩放translate(x:number|string,y?:number|string,z?:number|string):Display设置显示对象位移getTranslate():Vector3D获取显示对象的位移update():void更新场景中的(position,translate,rotate,scale) 的设置
Sprite 是基本显示列表构造块：一个可包含子项的显示列表节点。
- children:Display[] ,[只读]当前Sprite下的所有子显示对象
- numChildren:number ,[只读]当前Sprite下子项的数量
- material:Material[] 设置或者获取显示对象组的材质
- addChild(...displays:Display[]):void 添加显示对象到组内
- removeChild(...displays:Display[]):void 从组内移除对象
stage 为所有显示元件的顶级父对象，一个场景只能有一个stage。
var stage = new c3.Stage(stageWidth,stageHeight)
stageWidth舞台宽度stageHeight舞台高度
- camera:c3.Camera 获取当前场景的
camera
- attach(seletor:string) 挂载到某个元素上
camera 为 stage 的直接子元素。可以通过 stage.camera 引用
fov相机视锥体垂直视角
一个二维平面 ,平面具有width,height,zIndex,material
var plane = new c3.Plane(width,height,zIndex = 0)
- width:number 平面宽度
- height:number 平面高度
- zIndex:number 平面的z-index
- material:Material 设置或者获取平面的材质
一个三维立方体空间
var cube = new c3.Cube(x,y,z)
- x:number 立方体x轴宽度
- y:number 立方体y轴宽度
- z:number 你放图z轴宽度
多面圆柱，所有的面长宽是相等的
var cylinder = new c3.Cylinder(width,height,num)
- width:number 面宽
- height:number 面高
- num:number 面的个数
一个材质可以被多个显示对象使用，每个显示对象只能有一个材质，这里的材质实质上是对于显示对象的css操作
var material = new C3.Material(param:Itexture = {})
Itexture 包括
- color?:string css:background-color
- position?:string css:background-position
- size?:string css:background-size
- repeat?:string css:background-repeat
- origin?:string css:background-origin
- clip?:string css:background-clip
- attachment?:string css:background-attachment
- image?:string css:background-image
- filter?:string css:filter
- hidden?:boolean css:background:none
- visible?:boolean css:visible
- backface?:boolean css:backface-visibility
- opacity?:number css:opacity
- clone() 克隆当前材质
- update(param:Itexture = {}) 更新材质
- getAttr(attr) 获取材质属性值
- render(target?:Display) 将材质渲染到某个显示对象上
c.style(el,param)为元素添加css,api可以见style.jsc.rnd(min,max)生成指定区间的随机数c.rndInt(min,max)生成指定区间的随机整数c.rndColor()生成随机色值