WebAR与小程序AR极速入门教程
WebAR 与小程序 AR 极速入门教程
Kmotion 高级前端进阶;)
高级前端进阶
微信号 FrontendGaoji
功能介绍 网易 & 蚂蚁前端，专注前端进阶领域，已帮助无数前端跳槽涨薪。每日一题「Daily-Interview-Question」 Github 收获近 25000 颗小星星，各公司面试官都在使用。接下来带你走进高级前端的世界，在进阶的路上，共勉！
2021-05-16 10:00
收录于话题
高级前端进阶
网易 & 蚂蚁前端，专注前端进阶领域，已帮助无数前端跳槽涨薪。每日一题「Daily-Interview-Question」 Github 收获近 25000 颗小星星，各公司面试官都在使用。接下来带你走进高级前端的世界，在进阶的路上，共勉！
48 篇原创内容
公众号
点击上方 高级前端进阶，回复 “加群”
加入我们一起学习，天天进步
最近有一些关于 AR 的需求，客户希望能在网页端或微信小程序端体验。
在网上搜索了一圈后发现，主要的麻烦地方是在 3D 场景的渲染，初步调研下来，渲染引擎可以使用 three.js 或 babylon.js，但是之前从来没有用过渲染引擎做项目，实际处理起来还是比较吃力，最关键的是还需要移植到微信小程序中。
幸亏在微信小程序官方提供了扩展工具：threejs-miniprogram，但是发现加载模型还要做许多适配，确实很麻烦。
之前开发 H5 的时候，就知道市面上有很多普通 H5 的制作工具，比如 iH5、MAKA 等；抱着试一试的态度，竟然还是找到了一个 AR 制作平台：Kivicube
它像 iH5 一样有一个编辑器可以制作交互场景，关键是同时支持网页端与微信小程序端。
于是尝试一下，效果还不错。
接下来简单说说我制作的过程~
1. 准备模型
推荐大家一个超牛逼的网站，Adobe Mixamo，里面有很多高品质模型，关键是动画超级多。
我选了一个默认卡通妹子，精心挑选了一段舞蹈动画，然后点击下载，可以下载带动画的 FBX 文件，贴心。
2. 上传模型
看了 Kivicube 的文档，建议用户使用模型编辑器上传模型文件，还能调整材质压缩贴图，更贴心。
调完材质一键上传，Cooooooooool
3. 在 Kivicube 平台上制作交互
支付宝的扫福很火，我也做个扫福的 AR 效果
这样几分钟就完成一个 WebAR 案例。
4. 制作小程序 AR
Kivicube 有一个官方小程序【AR 扫呀扫】可以直接扫描扫描上面的二维码体验。但是我想的是将小程序 AR 功能放在我自己的小程序中。幸亏官方贴心的提供了小程序 AR 插件。
还有一个快速入门的 AR 示例代码，在 GitHub 上：github.com/kivisense/w…
接入也非常简单，我录制了一个视频给大家。
www.bilibili.com/video/BV1B6…
关于本文
作者：Kmotion
https://juejin.cn/post/6951588622566948901
The End
欢迎自荐投稿，如果你觉得这篇内容对你挺有启发，我想请你帮我三个小忙：
1、点个 「在看」，让更多的人也能看到这篇内容
2、关注官网 https://muyiy.cn，让我们成为长期关系
3、关注公众号「高级前端进阶」，公众号后台回复 「加群」 ，加入我们一起学习并送你精心整理的高级前端面试题。
高级前端进阶
网易 & 蚂蚁前端，专注前端进阶领域，已帮助无数前端跳槽涨薪。每日一题「Daily-Interview-Question」 Github 收获近 25000 颗小星星，各公司面试官都在使用。接下来带你走进高级前端的世界，在进阶的路上，共勉！
48 篇原创内容
公众号
》》面试官都在用的题库，快来看看《《
“在看” 吗？在看就点一下吧
预览时标签不可点
收录于话题 #
个
上一篇 下一篇
喜欢此内容的人还喜欢
前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
高级前端进阶
不喜欢
不看的原因
确定
- 内容质量低
- 不看此公众号
写留言
我的留言
正在加载
展开我的留言
以上留言被精选后，将对所有人可见
精选留言
正在加载
已无更多数据
关闭
写留言
提交更多
正在加载
正在加载
留言
微信扫一扫
关注该公众号
微信扫一扫
使用小程序
： ， 。 视频 小程序 赞 ，轻点两下取消赞 在看 ，轻点两下取消在看
该账号因违规无法跳转
https://mp.weixin.qq.com/s/gsPF3jP2VQ_uQ_90N0xtlA
若有收获，就点个赞吧
0 人点赞
