《鬼滅之刃花街篇》開播在即，今天帶大家零基礎(chǔ)使用Kivicube制作一個(gè)炭治郎的AR云手辦，可以通過微信小程序?qū)R版的炭治郎放置在家中，提前感受鬼滅的氛圍。先上個(gè)GIF大家看看動(dòng)態(tài)的展示效果

在這里先科普一下本次教程使用到的AR技術(shù)——空間定位與追蹤（SLAM），相比其他的AR技術(shù)有什么亮點(diǎn)。

空間定位與追蹤（SLAM）能夠?qū)τ脩舻恼鎸?shí)環(huán)境進(jìn)行感知，從而把AR模型動(dòng)畫素材放置并固定在真實(shí)的環(huán)境中，最后達(dá)到虛實(shí)緊密結(jié)合的效果。

大家比較熟知的宜家家具擺放就是屬于SLAM技術(shù)的成熟商業(yè)應(yīng)用。用戶可以打開手機(jī)識(shí)別真實(shí)的地面將宜家的家具擺放在真實(shí)家庭環(huán)境中，輔助消費(fèi)者判斷家具是否符合家里的裝修風(fēng)格。

（一）制作工具介紹

首先在在制作軟件上我用到的是免費(fèi)的XR在線制作平臺(tái)Kivicube。

整個(gè)平臺(tái)的操作都是可視化的，其他功能模塊如AR圖像追蹤與AR陀螺儀場(chǎng)景的操作基本都是把各種模型動(dòng)畫、音頻等等拖到中間這個(gè)網(wǎng)格中，拖拽調(diào)整相對(duì)位置，再簡(jiǎn)單設(shè)置一些觸發(fā)事件就能完成制作，并且能夠在瀏覽器跟微信小程序里直接體驗(yàn)，免去了自己build一個(gè)APP的巨大難題！并且也能更方便的分享給其他人。

想學(xué)習(xí)怎么使用這個(gè)平臺(tái)的同學(xué)也可以關(guān)注一下Kivicube的官方B站賬號(hào)「彌知科技」里面有很多其他功能模塊的教程。

使用MMD模型通過Kivicube平臺(tái)制作WebAR與小程序AR

本次教程里用到的是Kivicube平臺(tái)新上線的「空間定位與追蹤」功能，操作相比其他的功能模塊會(huì)更加簡(jiǎn)單。

?

（二）制作教程

1、模型處理

首先我們需要自己建一個(gè)炭治郎的模型。和我一樣不會(huì)建模的同學(xué)們這里我推薦sketchfab平臺(tái)，里面非常大量的免費(fèi)模型可供下載，質(zhì)量也非常高。

挑選好合適的模型之后需要自己通過kivicube的在線模型編輯器調(diào)整一下光照與材質(zhì)，目的主要是讓模型在AR環(huán)境中也能達(dá)到理想的效果。同樣屬于小白友好的可視化操作，大家通過調(diào)整右側(cè)的選項(xiàng)與參數(shù)就能實(shí)時(shí)在左側(cè)預(yù)覽調(diào)整效果。

調(diào)整好了就一鍵導(dǎo)出一個(gè)GLB模型，咱們素材準(zhǔn)備就完成了。調(diào)整好的模型我也放了一份到網(wǎng)盤，想跳過模型調(diào)整步驟的同學(xué)可以直接下載。

鏈接: https://pan.baidu.com/s/1Zw_ZDOx4Orul4WZ_zXgIdQ? 密碼: q5lq

2、模型上傳

首先需要先注冊(cè)登陸一下KIVICUBE賬號(hào)，網(wǎng)址：www.kivicube.com

右側(cè)點(diǎn)擊了解詳情有官方SLAM教程傳送門，有需要也能看官方的教程

登錄成功后，點(diǎn)擊界面上方「+AR場(chǎng)景」功能，選擇場(chǎng)景類型為「空間定位與跟蹤」

選擇并上傳剛剛通過AR模型編輯器調(diào)整過的炭治郎模型

接著開始設(shè)置場(chǎng)景縮略圖與場(chǎng)景名稱等基本信息，點(diǎn)擊「生成體驗(yàn)鏈接」

3、場(chǎng)景發(fā)布

然后我們就進(jìn)入了最后一個(gè)步驟，發(fā)布SLAM場(chǎng)景。這里需要提一下，目前Kivicube針對(duì)不同的用戶群體做了三種不同的場(chǎng)景發(fā)布方式。

掃碼直達(dá)：用戶直接按照二維碼下的指引，掃描下方微信小程序碼即可體驗(yàn)剛剛我制作的炭治郎場(chǎng)景，將AR炭治郎放置在真實(shí)的環(huán)境中。

小程序插件：針對(duì)一些有將場(chǎng)景植入自己微信小程序需要的伙伴，能夠通過簡(jiǎn)單的操作將剛剛制作好的炭治郎場(chǎng)景接入自己的小程序

插件與自定義開發(fā)：主要針對(duì)于想要實(shí)現(xiàn)二次開發(fā)的伙伴，譬如我們希望點(diǎn)擊炭治郎的模型后出現(xiàn)一些彈窗或者想要自己做一套好看的UI放在場(chǎng)景中等等，這項(xiàng)功能適用于有更好編程基礎(chǔ)的同學(xué)

以上就是本次教程的全部?jī)?nèi)容啦，希望伙伴們能通過這篇教程發(fā)散出更多精彩的AR場(chǎng)景！ 如果對(duì)Kivicube的功能有任何的建議，也歡迎大家隨時(shí)B站留言我們哦～