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

2022-12-02 10:24:12 浏览数 (1)

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

今天给大家介绍一款轻量有趣的 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 基于 CanvasSVG 来构建简单的 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 ,按提示操作即可进群。

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

0 人点赞