插件描述：3d基础学习案例，这里抽取出three中3D核心类库，组织了一个简化版的3D引擎，并做了大量的注释，可以帮助了解3D算法基础中的矢量，矩阵及四元数等的相互关系。
使用范例
创建stage,stage是舞台,是整个场景的根.
1 | var s = new C3D.Stage(); |
所有的函数都可以链式调用,
1 2 3 | s.size(window.innerWidth, window.innerHeight).material({ color : "#cccccc" }).update(); |
以上代码也可以等同以下代码
1 2 3 4 | 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元素
1 | document.getElementById('main').appendChild(s.el); |
创建一个三维容器,容器没有高宽深和材质信息,只有位置,旋转,缩放等信息.
1 2 3 | var sp = new C3D.Sprite(); sp.position(0, 0, -500).update(); s.addChild(sp); |
创建一个平面放入场景
1 2 3 4 5 | 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); |
创建一个立方体放入场景
1 2 3 4 5 | 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混淆了。
如果希望单独控制立方体各面的素材可以如下方式
1 2 3 4 5 6 7 8 9 10 | 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类库也可以方便的修改
1 2 3 4 5 6 7 8 | 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中的几个案例,可以下载到本地查
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 鼠标移动时画画
- 下一个特效： 扁平风格登录注册表单界面