好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css3d-engine

css3d-engine 介绍

css 3d引擎,为方便工作需要制作

优势:因为是基于div+css3实现,相对canvas webgl拥有更好的平台兼容性。

劣势:渲染 性能 相比canvas webgl要弱,只适合创建较小的三维面片场景。但是只有14k,相比那些动辄300-400k的大型3d库,这是个非常小巧实用的辅助 支持 库。

C3D.Object

三维元素基类,拥有如下 方法 :

设置位置

.x;

.y;

.z;

.position(x,y,z);

增量移动

.move(x,z);

设置旋转中心

.originX;

.originY;

.originZ;

.origin(x,z);

设置旋转角度

.rotationX;

.rotationY;

.rotationZ;

.rotation(x,z);

增量旋转

.rotate(x,z);

设置缩放比

.scaleX;

.scaleY;

.scaleZ;

.scale(x,z);

设置尺寸

.width;

.height;

.depth;

.size(x,z);

设置材质(div的background相关的几种 属性 )

.material({image:'',color:'',position:'',size:'',repeat:'',origin:''});

设置可见性

.alpha;

.visible;

.visibility({visible:true,alpha:1});

设置滤镜(css3滤镜:grayscale,blur,saturate,sepia,hue-rotate,invert,bright nes s,contrast,opacity)

.filter({filter-type:p ara ms});

设置 名称 (当该元素有 名称 的话,被addChild 添加 进入到别的元素时,可以直接用元素的 属性 方式访问,比如 名称 为'b1'的元素被加入到 名称 为'a1'的元素,之后就可以直接用a1.b1获得该元素.反之,被removeChild移除时也会 删除 绑定的 属性 .)

.name(string);

添加 删除 子节点

.addChild(object3D);

.removeChild(object3D);

刷新相应的dom 内容 ,位置,角度,尺寸,材质等信息只有在执行此命令后才会被作用到dom节点,以正常 显示 。

.update();

刷新尺寸

.updateS();

刷新旋转中心

.updateO();

刷新位置,角度

.updateT();

刷新材质

.updateM();

刷新可见性

.updateV();

刷新滤镜

.updateF();

移除自身,从场景中移除

.remove();

拥有如下 属性

parent 父节点

children 子节点数组

C3D.Sprite

三维 显示 元素基类,继承自Object3D,是其他所有 显示 元素的基类。 一般用于作为容器使用,自身只会刷新位置,角度,缩放信息。没有高宽深的体积信息。拥有如下 方法 :

绑定事件

.on();

解除绑定事件

.off();

设置材质信息,在Sprite3D中,因为没有体积,所以color,images都是无效的,只有alpha会起作用。

.material({color:'#ff0000',images:"",alpha:1});

设置鼠标状态,设置为true就是按钮状态。

.buttonMode(bool);

C3D.Stage

三维场景,需要首先创建,其他所有 内容 都通过addchild 方法 放入场景即可。

C3D.Camera

摄像机,最基本的3D摄像机,场景创建时 自动 创建,通过stage.camera 属性 获取 。

C3D.Plane

平面,顾名思义。

C3D.Cube

立方体,顾名思义,指定材质时可以 添加 6面的 图片 定义。

eg.{front:"",back:"",left:"",right:"",up:"",down:""}

其他全局 方法 :

C3D.getRandomColor();

C3D.rgb2hex();

C3D.hex2rgb();

C3D.create(obj);

此 方法 非常有用,可以帮助 快速 创建场景.

实现案例:

http://shrek.imdevsh.com/show/drose/

http://show.im20.com.cn/bbcny/

http://shrek.imdevsh.com/show/crazylight/

http://show.im20.com.cn/zwj/

GitHub: https://github.com/shrekshrek/css3d-engine

网站描述: css 3d引擎,为方便工作需要制作

css3d-engine官方网站

官方网站:

如果觉得 网站内容还不错,欢迎将 网站 推荐给程序员好友。

查看更多关于css3d-engine的详细内容...

  阅读:32次

上一篇

下一篇

第1节:Basscss    第2节:sandal    第3节:CssLoad    第4节:tachyons    第5节:CssDeck    第6节:Pure.css    第7节:typebase.css    第8节:FOX CSS    第9节:Normalize.css    第10节:csscss    第11节:flex-layout-attribute    第12节:css-loaders    第13节:stylelint    第14节:CleanCss    第15节:text-spinners    第16节:CssStats    第17节:EnjoyCSS    第18节:SpinKit    第19节:Shoelace.css    第20节:Core.css    第21节:Yoga    第22节:CssComb    第23节:CSS 揭秘    第24节:cssnano    第25节:CSSgram    第26节:imagehover.css    第27节:Biomatic UI    第28节:Devices.css    第29节:colors.css    第30节:Styled-Component    第31节:CSS Gradient Generator    第32节:polished    第33节:Milligram    第34节:microtip    第35节:CrookedStyleSheets    第36节:NES.css    第37节:CssDig    第38节:wing    第39节:NEC    第40节:Emmet LiveStyle    第41节:cssfx    第42节:csshake    第43节:BearCss    第44节:stylus    第45节:minireset.css    第46节:Effeckt.css    第47节:Hover Buttons    第48节:family.scss    第49节:CSSPeeper    第50节:css-loader    第51节:animista    第52节:CSS Inspiration    第53节:Titanic    第54节:epic-spinners    第55节:github-markdown-css    第56节:Picnic CSS    第57节:Siimple    第58节:Grabient    第59节:Critical    第60节:css3d-engine    第61节:vivify    第62节:css-doodle    第63节:Pleeease    第64节:CSS-Tricks    第65节:topcoat    第66节:CssNext    第67节:balloon.css    第68节:CSS-Inspiration    第69节:sass    第70节:open-color    第71节:hover    第72节:hotcss    第73节:ScrollDir    第74节:Obnoxious.CSS    第75节:css-blocks    第76节:Buttons    第77节:Choreographer-js    第78节:Gumby    第79节:LostGrid    第80节:water.css    第81节:magicCss    第82节:postcss    第83节:CSS Modules    第84节:Spectre.css    第85节:a11y.css    第86节:AniJS    第87节:uncss    第88节:Photon    第89节:kissui.scrollanim    第90节:Blaze UI    第91节:Hint.css    第92节:csso    第93节:stylefmt    第94节:CssPiffle    第95节:CJSS    第96节:css-animation-101    第97节:mini.css    第98节:magic    第99节:flexboxgrid    第100节:tailwindcss    第101节:css-modal    第102节:CssMatic    第103节:DropCSS    第104节:Repaintless.css    第105节:Wenk    第106节:tacit    第107节:HTML-KickStart    第108节:Css3Maker    第109节:Metro UI    第110节:min.css