Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
fly63工具箱
简单、易用、便捷的在线工具
扣子Coze
职场AI,就用扣子
周易国学网
基于周易、八字、紫微斗数等传统国学文化
趣网商城
私密生活好物,隐私配送,无痕购物
沁言学术
AI智能学术研究平台,覆盖科研全流程服务
必火AI
数字人一站式创作平台
蜂小推
不扣量的项目推广平台
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
免费资源下载中心
一站式解决工作学习需求的宝藏网站
豆包AI
字节跳动旗下 AI 智能助手

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

css3d-engine

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/shrekshrek/css3d-engine
描述信息:css 3d引擎,为方便工作需要制作
GitHub

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

优势:因为是基于div+css3实现,相对canvas webgl拥有更好的平台兼容性。
劣势:渲染性能相比canvas webgl要弱,只适合创建较小的三维面片场景。
但是只有14k,相比那些动辄300-400k的大型3d库,这是个非常小巧实用的辅助支持库。  


类

C3D.Object
三维元素基类,拥有如下方法:
设置位置
.x;
.y;
.z;
.position(x,y,z);
增量移动
.move(x,y,z);

设置旋转中心
.originX;
.originY;
.originZ;
.origin(x,y,z);

设置旋转角度
.rotationX;
.rotationY;
.rotationZ;
.rotation(x,y,z);
增量旋转
.rotate(x,y,z);

设置缩放比
.scaleX;
.scaleY;
.scaleZ;
.scale(x,y,z);

设置尺寸
.width;
.height;
.depth;
.size(x,y,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,brightness,contrast,opacity)
.filter({filter-type:params});

设置名称(当该元素有名称的话,被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/


仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/1409

更多»
热门资源
less
一个CSS预处理器,意味着它扩展了CSS语言,增加了允许变量,混合,函数和许多其他技术的功能
官网
GitHub
sass
成熟、稳定和强大的CSS扩展语言
官网
GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网
GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网
GitHub
animate.css
齐全的CSS3动画库
官网
GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网
GitHub
Spectre.css
轻量响应式 CSS 框架
官网
GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网
GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入
GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网
GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网
GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网
GitHub
类似于css3d-engine的资源
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网
GitHub
Easing Wizard
免费的 CSS 缓动曲线在线编辑器
官网
CSS Tricks
常用的CSS样式与技巧
官网
GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网
GitHub
CSSgram
类似 Instagram 滤镜效果的 CSS 库
官网
GitHub
csscss
检测具有相同属性的css样式
官网
GitHub
Styled-Component
基于 Css In Js 方式实现的一个库
官网
GitHub
Pleeease
一个CSS前缀生成器,可以执行其他高级的CSS3更新.
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

Copyright © 2018 Web前端开发网 All Rights Reserved. 提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。