css3 虚拟3d 效果

所属分类:其他-独立的部件

 22724  298  查看评论 (0)
分享到微信朋友圈
X
css3 虚拟3d 效果 ie兼容12

使用范例

创建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中的几个案例,可以下载到本地查

相关插件-独立的部件

jQuery漂亮的CSS3颜色渐变选择器

jQuery漂亮的CSS3颜色渐变选择器可直接生成各种CSS渐变代码,功能强大!
  独立的部件
 30625  324

后台管理框架

后台管理框架基于bootstrap
  独立的部件
 89783  592

jQuery二维码生成插件qrcode.js

应用小工具二维码生成
  独立的部件
 40293  477

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 62922  434

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复