最近有一些關(guān)于AR的需求，客戶希望能在網(wǎng)頁(yè)端或微信小程序端體驗(yàn)。

在網(wǎng)上搜索了一圈后發(fā)現(xiàn)，主要的麻煩地方是在3D場(chǎng)景的渲染，初步調(diào)研下來，渲染引擎可以使用three.js或babylon.js，但是之前從來沒有用過渲染引擎做項(xiàng)目，實(shí)際處理起來還是比較吃力，最關(guān)鍵的是還需要移植到微信小程序中。

幸虧在微信小程序官方提供了擴(kuò)展工具：threejs-miniprogram，但是發(fā)現(xiàn)加載模型還要做許多適配，確實(shí)很麻煩。

之前開發(fā)H5的時(shí)候，就知道市面上有很多普通H5的制作工具，比如iH5、MAKA等；抱著試一試的態(tài)度，竟然還是找到了一個(gè)AR制作平臺(tái)：Kivicube

它像iH5一樣有一個(gè)編輯器可以制作交互場(chǎng)景，關(guān)鍵是同時(shí)支持網(wǎng)頁(yè)端與微信小程序端。

于是嘗試一下，效果還不錯(cuò)。

接下來簡(jiǎn)單說說我制作的過程~

1.準(zhǔn)備模型

推薦大家一個(gè)超牛逼的網(wǎng)站，Adobe Mixamo，里面有很多高品質(zhì)模型，關(guān)鍵是動(dòng)畫超級(jí)多。

我選了一個(gè)默認(rèn)卡通妹子，精心挑選了一段舞蹈動(dòng)畫，然后點(diǎn)擊下載，可以下載帶動(dòng)畫的FBX文件，貼心。

2.上傳模型

看了Kivicube的文檔，建議用戶使用模型編輯器上傳模型文件，還能調(diào)整材質(zhì)壓縮貼圖，更貼心。

調(diào)完材質(zhì)一鍵上傳，Cooooooooool

3.在Kivicube平臺(tái)上制作交互

支付寶的掃福很火，我也做個(gè)掃福的AR效果

這樣幾分鐘就完成一個(gè)WebAR案例。

4.制作小程序AR

Kivicube有一個(gè)官方小程序**【AR掃呀掃】**可以直接掃描掃描上面的二維碼體驗(yàn)。但是我想的是將小程序AR功能放在我自己的小程序中。幸虧官方貼心的提供了小程序AR插件。

還有一個(gè)快速入門的AR示例代碼，在GitHub上：https://github.com/kivisense/wechat-kivicube-plugin-quickstart

接入也非常簡(jiǎn)單，我錄制了一個(gè)視頻給大家。https://www.bilibili.com/video/BV1B64y1v7HY