css3 虚拟3d 效果

使用范例

创建stage,stage是舞台,是整个场景的根.  

var s = new C3D.Stage();

所有的函数都可以链式调用,  

s.size(window.innerWidth, window.innerHeight).material({  
    color : "#cccccc"  
}).update();

以上代码也可以等同以下代码  

s.width = window.innerWidth;  
s.height = window.innerHeight;  
s.material({color : "#cccccc"});  
s.update();

一般在创建元素时使用update(),update中会分别执行updateS(),updateM(),updateT(),updateV(),保证元素创建完整.之后再做其他属性改变时只需要调用相关函数,不用再调用完整功能的update()了.  

最后将stage的dom元素置入所需位置,el是所有三维元素的属性,包含对应的dom元素  

document.getElementById('main').appendChild(s.el);

创建一个三维容器,容器没有高宽深和材质信息,只有位置,旋转,缩放等信息.  

var sp = new C3D.Sprite();  
sp.position(0, 0, -500).update();  
s.addChild(sp);

创建一个平面放入场景  

var p = new C3D.Plane();  
p.size(100).position(0, 100, -s.fov).rotation(0, 0, 0).material({  
    color : C3D.getRandomColor()  
}).update();  
s.addChild(p);

创建一个立方体放入场景  

var c = new C3D.Box();
c.size(100).position(0, -100, -s.fov).rotation(0, 0, 0).material({  
    color : C3D.getRandomColor()  
}).update();  
s.addChild(c);

这里position中的z设置为s.fov是因为这个值就是摄像头前正好可以原比例显示物体的距离，注意这里的s是stage，不是camera，不要和camera.fov混淆了。

如果希望单独控制立方体各面的素材可以如下方式  

var c = new C3D.Cube();  
c.size(100).position(0, -100, -s.fov).rotation(0, 0, 0).material({  
    front : {color:C3D.getRandomColor()},  
    back : {color:C3D.getRandomColor()},  
    left : {color:C3D.getRandomColor()},  
    right : {color:C3D.getRandomColor()},  
    up : {color:C3D.getRandomColor()},  
    down : {color:C3D.getRandomColor()},  
}).update();  
s.addChild(c);

动画部分结合jstween类库也可以方便的修改  

JT.fromTo(p, 3, {rotationY: 0}, {  
    rotationY: 90, ease: JT.Quart.In, onUpdate: function () {  
        // 此处因为是rotationY变化,只需要调用updateT()就可以,如果是alpha活visible变化,需要调用updateV(),材质变化调用updateM(),尺寸变化调用updateS()  
        this.updateT();  
    },onEnd:function(){  
        sp.removeChild(this);  
    }  
});

其他类库,比如tweenmax等也可以使用类似方式来处理  

其他可以参考example中的几个案例,可以下载到本地查

PREVIOUS:
NEXT:
扁平风格登录注册表单界面
鼠标移动时画画