手把手指导制作一个 WebAR 与小程序 AR

怼烎@ 2023-01-17 08:00 181阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![e85af9d4e4bcc6136196493b680bb28f.png][]

# 来源：Kmotion #

https://juejin.cn/post/6951588622566948901

最近有一些关于AR的需求，客户希望能在网页端或微信小程序端体验。

在网上搜索了一圈后发现，主要的麻烦地方是在3D场景的渲染，初步调研下来，渲染引擎可以使用three.js或babylon.js，但是之前从来没有用过渲染引擎做项目，实际处理起来还是比较吃力，最关键的是还需要移植到微信小程序中。

幸亏在微信小程序官方提供了扩展工具：threejs-miniprogram，但是发现加载模型还要做许多适配，确实很麻烦。

之前开发H5的时候，就知道市面上有很多普通H5的制作工具，比如iH5、MAKA等；抱着试一试的态度，竟然还是找到了一个AR制作平台：**Kivicube**

![f8769473ffb25c01ccbe7333f352c8e4.png][]

它像iH5一样有一个编辑器可以制作交互场景，关键是同时支持网页端与微信小程序端。

于是尝试一下，效果还不错。

![5f2a7517c0a81402f9671fb6b5020467.gif][]

接下来简单说说我制作的过程~

### 1.准备模型 ###

推荐大家一个超牛逼的网站，**Adobe Mixamo**，里面有很多高品质模型，关键是动画超级多。

![970cf67bb0b9de50fbc312684c91412e.png][]

我选了一个默认卡通妹子，精心挑选了一段舞蹈动画，然后点击下载，可以下载带动画的FBX文件，贴心。

## 2.上传模型 ##

看了Kivicube的文档，建议用户使用模型编辑器上传模型文件，还能调整材质压缩贴图，更贴心。

![2cf5b1c35f01d495c7a9951910e64b75.png][]

调完材质一键上传，Cooooooooool

## 3.在Kivicube平台上制作交互 ##

支付宝的扫福很火，我也做个扫福的AR效果

![c8cffa0a4a9858125f3eb044cf2b0886.png][]

这样几分钟就完成一个WebAR案例。

![1efdfcbdeca1c88aaed9391d9b5e76b6.png][]

## 4.制作小程序AR ##

Kivicube有一个官方小程序\*\*【AR扫呀扫】\*\*可以直接扫描扫描上面的二维码体验。但是我想的是将小程序AR功能放在我自己的小程序中。幸亏官方贴心的提供了小程序AR插件。

还有一个快速入门的AR示例代码，在GitHub上：https://github.com/kivisense/wechat-kivicube-plugin-quickstart

接入也非常简单，我录制了一个视频给大家。

https://www.bilibili.com/video/BV1B64y1v7HY

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[e85af9d4e4bcc6136196493b680bb28f.png]: /images/20221021/0a9c3da65e7e4e108abcdd58951cd370.png
[f8769473ffb25c01ccbe7333f352c8e4.png]: /images/20221021/5c8a952b71b34febaea77214fa59930f.png
[5f2a7517c0a81402f9671fb6b5020467.gif]: /images/20221021/a22aa309723c4ba2aa944cef41efc5c1.png
[970cf67bb0b9de50fbc312684c91412e.png]: /images/20221021/ed5d4abfc2d54c53bdc2e1492398d78d.png
[2cf5b1c35f01d495c7a9951910e64b75.png]: /images/20221021/57748770d3d64a07bb181c9124554c47.png
[c8cffa0a4a9858125f3eb044cf2b0886.png]: /images/20221021/6d1d0b7b788a40268312cebd63ce426f.png
[1efdfcbdeca1c88aaed9391d9b5e76b6.png]: /images/20221021/f6394861032249cfb30152d124acdb54.png