哈喽,大家好!我是前端实验室的小师妹!
今天给大家介绍一款轻量有趣的 3D 引擎,可以用来做一些简单的 3D 模型展示~
Zdog 一个3D JavaScript引擎
Zdog 是一个用于 和 SVG 的 3D JavaScript 引擎。通过 Zdog,可以在 Web 界面上设计和渲染简单的 3D 模型。 Zdog 是一个伪 3D 引擎,它的几何图形存在于 3D 空间中,但却以平面图形进行渲染。这就让 Zdog 很特别。换句话说,你可以设计、显示和动画 SVG 或基于 canvas 的 3D 模型。
Zdog.js
整个库只有 2100 行代码,压缩之后只有 28KB。而且对开发人员很友好,你可以使用直接声明性 API 来快速构建简单的模型。
安装Zdog.js
CDN引入
代码语言:javascript复制# 压缩版
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
# 未压缩版
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.js"></script>
包管理器安装
代码语言:javascript复制# npm
npm install zdog
# Bower
bower install zdog
上手体验
Zdog.js
基于 Canvas
和 SVG
来构建简单的 3D 模型,通过 Zdog
设置动画和拖动效果,实现一些令人惊叹的图形和动画。官网有完整的Api文档和全面的基础图形的构建代码示例来帮助你快速上手和学习~
这是CodePen 上的官方“Hello World”演示,还有更多示例Demo实现的3D模型,着实好看呀!
如果你有一些比较简单的 3D 模型
的需求,有不想引入一个庞大的游戏引擎,获取Zdog
是你最好的选择,只要花点时间了解下,你会发现这玩意是真的好用啊!
下面是小师妹整理的几个基于Zdog
的演示合集,还有API相关的详细文档~
Zdog官网:https://zzz.dog/ Zdog演示合集1:https://codepen.io/collection/DzdGMe/ Zdog演示合集2:https://blog.codepen.io/2019/06/07/holy-zdog/
写在最后
欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式:在下方公众号后台,回复 111 ,按提示操作即可进群。
如果该文章对你有帮助,那么就点击右下角的 [点赞]「在看」,给一个小小的鼓励吧~