Skip to content

shrekshrek/css3d-engine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

css3d-engine

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

这个库只是基于原生css transform中除了matrix之外的属性,可以使用比较容易理解的欧拉角来控制旋转,建立简单的3D应用,对于3d开发0基础的开发者是个友善简单的入门类库。对于有更高3d要求的开发者建议使用three.js等类库。但同样对开发者的基础要求会更高,这里我整理了一个更通用的3d基础学习案例
https://github.com/shrekshrek/css3d-matrix-es6
抽取出three中3D核心类库,组织了一个简化版的3D引擎,并做了大量的注释,可以帮助了解3D算法基础中的矢量,矩阵及四元数等的相互关系。

有3d问题欢迎加入研讨。QQ群:572807793(webgl技术交流)

注意1:为了节约计算量,transform部分没有使用matrix,只用了最基本的translate,rotation,scale等属性的排列,默认的旋转顺序是rotationX(),rotationY(),rotationZ(),这样无法解决万向锁等问题,所以在使用时需要了解适应这点。如果需要调整可以使用sort()命令调整旋转顺序。

注意2:旧版的Cube更新为Box。

实现案例(移动端H5):

adidas绝不凋谢 https://shrek.imdevsh.com/show/drose/

adidas胜势全开 https://shrek.imdevsh.com/show/bbcny/

adidas绝不跟随 https://shrek.imdevsh.com/show/crazylight/

淘宝造物节 https://shrek.imdevsh.com/show/zwj/

这种Interactive 3d motion graphic类型的网站开发,以前都是程序来做动画,需要书写大量的tween代码,开发效率难以提高。从2018年初开始已经改用更先进高效的内部工具套装AEP开发,demo地址如下:
https://github.com/shrekshrek/aep

  • VERSION: 0.1.0 DATE: 2014-11-20

License

This content is released under the MIT License.

About

css 3d light engine. very easy to use. 14k

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published