超現(xiàn)實(shí)主義流派藝術(shù)家達(dá)利天馬行空的想象力注入其藝術(shù)作品中，旁人很難讀懂如“疲軟的鐘、長(zhǎng)腿大象、面部幻影”下面隱藏的深意。
美國佛羅里達(dá)州的「達(dá)利美術(shù)館」全面引入AR技術(shù)，將館內(nèi)所有的畫作AR化，以求用AR出色的表現(xiàn)力，幫助參觀者更好的理解畫作。
今天小編就使用KIVICUBE，十分鐘制作一個(gè)達(dá)利經(jīng)典畫作《永恒的回憶》WebAR導(dǎo)覽,通過微信即可直接體驗(yàn)！
使用到的工具包括：
GLTF模型效果在線查看工具Web3D viewer : https://project.kivisense.com/3dviewer/
WebXR在線制作平臺(tái)KIVICUBE: https://cloud.kivicube.com/#!/login/sign
「本次互動(dòng)涉及的資料包，關(guān)注彌知科技公眾號(hào)，回復(fù)“達(dá)利”即可領(lǐng)取」
場(chǎng)景構(gòu)思
在進(jìn)入場(chǎng)景制作之前，首先需要發(fā)起一次靈魂拷問：
制作這個(gè)WebAR場(chǎng)景需要用到什么樣的素材？
這個(gè)WebAR場(chǎng)景應(yīng)該遵循怎樣的交互邏輯？
- 在這個(gè)場(chǎng)景中，素材我需要用到：畫作的文字介紹、畫作模型、解說視頻以及觸發(fā)AR場(chǎng)景的一些icon
- 小編認(rèn)為一個(gè)清晰的交互邏輯，是制作好一個(gè)AR場(chǎng)景的重中之重！在本次教程中我也會(huì)多次cue到它～
場(chǎng)景制作
在前期場(chǎng)景構(gòu)思工作完成以后我們可以進(jìn)入第二步，場(chǎng)景的制作。
本次使用到的WebAR制作工具依然是WebXR在線制作平臺(tái)KIVICUBE。
一、賬號(hào)注冊(cè)
登陸www.kivicube.com注冊(cè)一個(gè)自己的賬號(hào)
二、創(chuàng)建場(chǎng)景
- 點(diǎn)擊下方“?”，新建一個(gè)項(xiàng)目，并填寫相關(guān)信息
- 項(xiàng)目創(chuàng)建完成后，我們需要在項(xiàng)目之下創(chuàng)建一個(gè)本次互動(dòng)的具體場(chǎng)景。點(diǎn)擊“+WebAR場(chǎng)景”，選擇“場(chǎng)景類型”為“圖像檢測(cè)與跟蹤”。
- 填寫場(chǎng)景信息，點(diǎn)擊立即制作。需要注意“識(shí)別圖”是指觸發(fā)AR內(nèi)容的圖片，選擇與模型或展示視頻第一幀相同的圖片作為識(shí)別圖會(huì)有意想不到的效果哦～
三、開始制作
好了終于到了大展拳腳的時(shí)候，大家看著密密麻麻的網(wǎng)格，各種陌生的按鈕是不是一臉蒙蔽？小編一開始也一樣呢，但是摸索下來發(fā)現(xiàn)，其實(shí)所有的功能KIVICUBE都安排的明明白白，只要來一丟丟耐心，跟著小編的教程一起操作一定是沒問題的～
- 上傳素材
不管三七二十一，先把小編素材包里的各種資料統(tǒng)統(tǒng)傳上去備用。當(dāng)然小伙伴們也可以選用KIVICUBE公共素材庫的素材或上傳自己覺得更優(yōu)質(zhì)的素材哦！在本次教程中小編也用到了兩個(gè)公用素材，分別是視頻播放按鈕（Play icon）和音頻文件（Vlog:hypnotized），記得把他們也拖進(jìn)去鴨！
- 搭建場(chǎng)景框架
看到網(wǎng)格大家不要感到頭痛！它的存在是大家提供參照，網(wǎng)格中素材間的相對(duì)位置與真實(shí)環(huán)境中素材的位置相同
現(xiàn)在大家就把之前“交互邏輯”中規(guī)劃的內(nèi)容，像搭積木一樣拖到網(wǎng)格之中并調(diào)整他們的相對(duì)位置
在搭建過程中，大家會(huì)頻繁的使用到幾個(gè)區(qū)域的按鈕（如上圖示）：
紅色區(qū)域三個(gè)按鈕調(diào)整素材位置；
藍(lán)色區(qū)域按鈕撤銷操作或刪除素材；
黃色區(qū)域按鈕精準(zhǔn)定位素材，將其安放在指定的位置。
- 增加場(chǎng)景交互
在調(diào)整完所有素材的相對(duì)位置后，基本的場(chǎng)景框架就搭建好了。
這里再次cue出場(chǎng)景構(gòu)思時(shí)規(guī)劃出的“交互邏輯”腳本，現(xiàn)在我們需要增加一些交互事件，讓所有的素材按照“交互邏輯”腳本的設(shè)定運(yùn)行。
1、首先需要明確的是，在KIVICUBE中，所有的素材都是默認(rèn)掃描即觸發(fā)的，如果某些素材我們不想場(chǎng)景一開始就觸發(fā)，我們需要選定素材后，點(diǎn)擊右側(cè)“對(duì)象設(shè)置”的“設(shè)置”按鈕，將素材狀態(tài)改為“不顯示”
本次腳本中需要調(diào)整的包括“文字介紹_達(dá)利、play icon、memory_解說視頻、關(guān)閉按鈕”
2、腳本中“音樂控制”按鈕可播放或暫停音樂。
所以我們需要設(shè)置：音頻控制→“音樂控制”按鈕被點(diǎn)擊時(shí)→音樂VLOG:hypnotized 暫停播放
同時(shí)，視頻播放時(shí)背景音樂不能播放。
所以還要設(shè)置：音頻控制→“play icon”視頻播放按鈕被點(diǎn)擊時(shí)→音樂VLOG:hypnotized 暫停播放
3、腳本中點(diǎn)擊“查看詳情”按鈕可顯示達(dá)利文字介紹與視頻播放按鈕。
所以需要點(diǎn)擊：顯示/隱藏→“查看詳情”按鈕被點(diǎn)擊時(shí)→“達(dá)利介紹”和“play icon”顯示。
4、接下來交互腳本中點(diǎn)擊“play icon”，將出現(xiàn)“memory_解說視頻”以及控制視頻關(guān)閉的“關(guān)閉按鈕”。
所以這里需要點(diǎn)擊：視頻控制→“play icon”按鈕被點(diǎn)擊時(shí)→“memory_解說視頻”播放
顯示/隱藏→“play icon”按鈕被點(diǎn)擊時(shí)→“關(guān)閉按鈕”顯示
5、接下來，用戶點(diǎn)擊“關(guān)閉按鈕”后視頻將停止并隱藏，“關(guān)閉按鈕”也會(huì)隱藏。所以還要設(shè)置以下三個(gè)交互：
“顯示/隱藏”→“關(guān)閉按鈕”被點(diǎn)擊時(shí)→“memory_解說視頻”隱藏
“視頻控制”→“關(guān)閉按鈕”被點(diǎn)擊時(shí)→“memory_解說視頻”停止
“顯示/隱藏”→“關(guān)閉按鈕”被點(diǎn)擊時(shí)→“關(guān)閉按鈕”隱藏
制作完成
經(jīng)過剛剛的一番苦戰(zhàn)，終于完成場(chǎng)景的制作啦！大家只需要點(diǎn)擊右上角“分享”按鈕，即可生成體驗(yàn)二維碼與鏈接。只需要微信掃一掃或點(diǎn)擊分享鏈接即可體驗(yàn)本次WebAR導(dǎo)覽互動(dòng)！
本次關(guān)于“達(dá)利WebAR導(dǎo)覽”的教程就到這里啦，也歡迎大家關(guān)注“彌知科技”公眾號(hào)，告訴你的創(chuàng)意腳本或者留下寶貴的意見和建議！
