Skip to content

Latest commit

 

History

History
92 lines (77 loc) · 2.92 KB

使用范例.md

File metadata and controls

92 lines (77 loc) · 2.92 KB
Raw

使用范例

创建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中的几个案例,可以下载到本地查看,在线demo地址如下:
http://shrek.imdevsh.com/demo/css3d/space.html
http://shrek.imdevsh.com/demo/css3d/simple.html

http://shrek.imdevsh.com/demo/kfc/ 最后这里有个综合案例，几乎涵盖了常规项目的一般需求，文件没有压缩，可以直接从线上抓取查看。