一、WebAR制作工具
首先要為大家介紹本次教程使用到的制作工具，WebXR制作平臺(tái)——KIVICUBE。
為什么要選擇KIVICUBE制作WebAR場(chǎng)景，小編大概總結(jié)了以下的功能亮點(diǎn)：
1.全面支持圖像實(shí)時(shí)跟蹤，真正的WebAR，實(shí)現(xiàn)與APP-AR相同的體驗(yàn)
2.多平臺(tái)支持，Kivicube支持支付寶、淘寶、百度等大流量平臺(tái)，支持AR智能眼鏡
3.豐富的交互模版，滿足多互動(dòng)場(chǎng)景的需要
4.海量模型素材庫(kù)，極大的降低了用戶的建模成本
5.大量的交互事件，零編程基礎(chǔ)用戶也能輕松駕馭
6.支持微信AR與小程序AR，無(wú)需下載獨(dú)立APP即可體驗(yàn)
二、準(zhǔn)備工作
首先，大家需要登陸KIVICUBE官網(wǎng)www.kivicube.com注冊(cè)自己的賬號(hào)。
那么如何10分鐘制作一個(gè)交互相對(duì)復(fù)雜的WebAR場(chǎng)景呢？下面這五個(gè)部分，需要你逐個(gè)準(zhǔn)備完成：
1.場(chǎng)景構(gòu)思
2.素材準(zhǔn)備
3.3D場(chǎng)景布置
4.事件交互設(shè)置
5.WebAR體驗(yàn)
制作截圖
三、WebAR模型視頻互動(dòng)場(chǎng)景制作
不是很長(zhǎng)的副標(biāo)題：5個(gè)步驟快速制作一個(gè)有15個(gè)互動(dòng)的WebAR場(chǎng)景
WebAR場(chǎng)景制作難度：??
素材制作難度：??????
場(chǎng)景制作時(shí)長(zhǎng)：10分23秒
1、場(chǎng)景構(gòu)思
萬(wàn)事始于構(gòu)思，在每個(gè)AR交互場(chǎng)景制作之前，需要制作者想好
場(chǎng)景整體的樣子是什么？
交互視角模式是什么？
哪些素材要以3D模式呈現(xiàn)？可以找彌知制作3D模型或復(fù)雜定制交互嗎？
需要有哪些交互？
當(dāng)然，若是商業(yè)項(xiàng)目的話，還需要考慮下：
使用WebAR的目的是什么？
需要達(dá)成什么目標(biāo)或得到什么結(jié)果？
一分投入兩分收獲，我有多少預(yù)算做這件事情？
2、素材導(dǎo)入
若構(gòu)思好了，我們就可以登錄www.kivicube.com開始WebAR的制作吧~
這次制作的目的是為了讓初學(xué)者可以上手制作，因此我就不把整體交互設(shè)置的這么復(fù)雜了！因此需要準(zhǔn)備的素材也不會(huì)這么復(fù)雜。
本次教程涉及的所有素材都能夠在KIVICUBE公共素材庫(kù)找到，請(qǐng)自行取用哦～
在上圖中，我們導(dǎo)入了視頻一個(gè)，3D icon按鈕兩只，模型動(dòng)畫一條，音樂(lè)兩位，識(shí)別圖一片。
材料準(zhǔn)備好之后，我們就可以開始做菜咯~
3、場(chǎng)景布置
因?yàn)檫@個(gè)識(shí)別圖是一張DM單，因此交互視角模式是平行視角。
整個(gè)場(chǎng)景我們?cè)趯?dǎo)入交互素材之后，通過(guò)3D編輯器，我們可視化的將場(chǎng)景進(jìn)行調(diào)整，將視頻與模型互動(dòng)動(dòng)畫合理擺放，調(diào)整位置、縮放大小。
細(xì)致的將按鈕坐標(biāo)設(shè)置對(duì)稱，并且擺在識(shí)別圖上美觀合適的位置。
這里請(qǐng)注意對(duì)下設(shè)置下方的“設(shè)置”面板。這里是對(duì)互動(dòng)素材進(jìn)行快速設(shè)置的地方。
比如我要將動(dòng)畫設(shè)置為“掃描到自動(dòng)播放”的時(shí)候，我可以在左側(cè)功能列表進(jìn)行選擇，并選擇觸發(fā)事件與觸發(fā)條件。還可以簡(jiǎn)單的在快速設(shè)置中勾選“自動(dòng)播放模型動(dòng)畫”，這兩種操作可以達(dá)到同樣的效果。
音頻、視頻、模型都有對(duì)應(yīng)的事件快速設(shè)置的功能哦。
4、事件交互設(shè)置
事件交互是最有趣的制作過(guò)程，用戶可以不用編程對(duì)事件進(jìn)行互動(dòng)設(shè)置。
場(chǎng)景一開始所觸發(fā)的事件
這里我們?cè)O(shè)置成已進(jìn)入場(chǎng)景就播放主模型的動(dòng)畫，這個(gè)時(shí)候隱藏后面的視頻，設(shè)置如圖：
其中觸發(fā)條件有很多種類型，大家可以下來(lái)每種類型都親自嘗試一下哦。
主模型點(diǎn)擊的事件
主模型的互動(dòng)為：一開始掃描到的時(shí)候，模型動(dòng)畫自動(dòng)播放，點(diǎn)擊視頻播放按鈕之后，模型動(dòng)畫停止，視頻進(jìn)行播放，點(diǎn)擊按鈕的時(shí)候，播放按鈕聲音。
因此這里我們需要設(shè)置左側(cè)的功能：“模型控制”，“視頻控制”和“音頻控制”。將觸發(fā)條件設(shè)置為如下圖
然后選擇對(duì)應(yīng)要播放，要控制的內(nèi)容互動(dòng)就可以啦。
點(diǎn)擊網(wǎng)站按鈕的事件
點(diǎn)擊網(wǎng)站按鈕打開網(wǎng)頁(yè)，這個(gè)直接設(shè)置功能“打開網(wǎng)頁(yè)”并且選擇好所觸發(fā)此功能的觸發(fā)條件，如下圖：
模型動(dòng)畫的觸發(fā)條件有很多種，由于網(wǎng)站icon我們是用的3D icon（不是平面的ui圖哦），是通過(guò)3D模型動(dòng)畫制作的3D模型。模型動(dòng)畫的每個(gè)狀態(tài)都可以設(shè)置為觸發(fā)條件。
點(diǎn)擊播放按鈕的事件
這里為什么有這么多事件呢？ 這里就不詳細(xì)說(shuō)明了，設(shè)置手法和思路跟上述事件一樣，就當(dāng)留個(gè)實(shí)際操作的作業(yè)習(xí)題吧。
5、WebAR體驗(yàn)
制作好點(diǎn)擊保存關(guān)閉編輯器。
制作好之后，還有三個(gè)細(xì)節(jié)需要考慮:
分享設(shè)置
分享圖標(biāo)、名稱與描述一定要好好填寫哦。
首頁(yè)樣式
首頁(yè)的背景圖、按鈕圖、是否需要自定義場(chǎng)景l(fā)ogo的圖
其他設(shè)置
如燈光、高級(jí)設(shè)置、AR設(shè)置等。
四、制作完成
那么我們一起來(lái)看看最后制作出的WebAR場(chǎng)景效果吧！
本次教程中的機(jī)器人科技感素材使用場(chǎng)景用途很多，大家在小編教程的基礎(chǔ)上進(jìn)行自由發(fā)揮，相信還能有更多的互動(dòng)模式哦！
小編會(huì)繼續(xù)給大家?guī)?lái)趣味性高、制作方便的AR場(chǎng)景教程，敬請(qǐng)期待哦！
