3D 炫酷效果很难实现吗？

哈喽，大家好！我是前端实验室的小师妹!

今天给大家介绍一款轻量有趣的 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引入

# 压缩版
<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>

包管理器安装

# 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 ，按提示操作即可进群。

如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~