基于VR技術(shù)的小學(xué)勞技作品展示平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

闕喜元

【摘要】本文研究以Photoshop、AutoCAD、3ds Max、Unity3D為主要技術(shù)手段，介紹了如何以御窯小學(xué)的御窯文化展示廳為原型，打造虛擬展廳的全過(guò)程。系統(tǒng)中的UI界面與貼圖素材的制作使用了Photoshop CS;平面圖的設(shè)計(jì)使用了AutoCAD 2007;場(chǎng)景與物品的建模使用了3ds Max 2014，最后結(jié)合三維建模工具和C#語(yǔ)言在Unity3D引擎中實(shí)現(xiàn)交互。整個(gè)系統(tǒng)界面友好、操作簡(jiǎn)便，有利于更好的傳播傳統(tǒng)文化，促進(jìn)學(xué)生良好勞動(dòng)技能的養(yǎng)成。

【關(guān)鍵詞】VR;Unity3D;御窯文化;展示平臺(tái)

一、總體設(shè)計(jì)概述

本項(xiàng)目以學(xué)校御窯文化展示廳為原型，在實(shí)地測(cè)量的基礎(chǔ)上，運(yùn)用AutoCAD完成平面設(shè)計(jì)，運(yùn)用3ds Max軟件對(duì)場(chǎng)景及展品進(jìn)行建模。在小學(xué)勞技作品展示平臺(tái)中所有模型將作為一個(gè)整體一同展示，通過(guò)Unity3D軟件為用戶(hù)設(shè)計(jì)兩種參觀模式，即自動(dòng)游覽與手動(dòng)參觀。自動(dòng)游覽可在不進(jìn)行任何操作的情況下，按照特定的路線(xiàn)完成整個(gè)參觀過(guò)程，手動(dòng)參觀則需要用戶(hù)通過(guò)鼠標(biāo)和鍵盤(pán)控制視角與位置。此外，為加強(qiáng)與參觀者的互動(dòng)，對(duì)具有交互功能的墻面貼圖進(jìn)行了設(shè)計(jì)，比如當(dāng)參觀者單擊圖片時(shí)，屏幕會(huì)彈出相關(guān)的知識(shí)介紹，供參觀者學(xué)習(xí)、參考。為了讓展廳更具真實(shí)感，對(duì)展廳窗戶(hù)的外景進(jìn)行了專(zhuān)門(mén)制作。

二、綜合框架設(shè)計(jì)

在充分考慮用戶(hù)需求的基礎(chǔ)上，開(kāi)發(fā)團(tuán)隊(duì)對(duì)設(shè)計(jì)思路進(jìn)行了交流和調(diào)整，最終形成了本展項(xiàng)目的總體結(jié)構(gòu)。本項(xiàng)目既要具備虛擬展廳的常規(guī)功能，即展品的釋名、歷史沿革、制作技藝等內(nèi)容方面的展示;又要滿(mǎn)足學(xué)生學(xué)習(xí)的需求，于是我們通過(guò)圖文和視頻兩種方式全面介紹了展品的制作流程。此外，考慮到展品的制作步驟繁瑣，復(fù)雜而精細(xì)，并不適合小學(xué)生模仿。我們針對(duì)展品的特點(diǎn)，設(shè)置了操作性強(qiáng)的實(shí)踐項(xiàng)目，比如：根據(jù)御窯金磚的制作技藝，我們?cè)O(shè)計(jì)了瓷盤(pán)制作的實(shí)踐內(nèi)容;根據(jù)蟋蟀罐的制作技藝，設(shè)計(jì)了泥塑、筆筒的實(shí)踐內(nèi)容;根據(jù)緙絲的制作技藝，設(shè)計(jì)了編織的實(shí)踐內(nèi)容。這些拓展實(shí)踐項(xiàng)目已經(jīng)成為了學(xué)校的特色社團(tuán)活動(dòng)，學(xué)校也在積極編寫(xiě)相關(guān)的校本教材。整個(gè)結(jié)構(gòu)主要包含了封面模塊，圖文模塊，視頻模塊，交互模塊等。關(guān)于封面設(shè)計(jì)，采用與展品及校園特色文化建設(shè)相符的“蘇式”風(fēng)格，用戶(hù)可通過(guò)三個(gè)通道分別瀏覽富有御窯文化特色的三件展品，也可以觀看學(xué)校傳承御窯文化的宣傳片。在進(jìn)入三維展廳后可以通過(guò)點(diǎn)擊指定的熱點(diǎn)參觀學(xué)習(xí)。

三、操作界面設(shè)計(jì)

隨著計(jì)算機(jī)技術(shù)和信息技術(shù)的不斷發(fā)展，新媒體、新技術(shù)在各領(lǐng)域中的應(yīng)用迅速而廣泛，并在人們的日常生活中發(fā)揮著積極的作用。處在這樣的信息社會(huì)，許多高新技術(shù)等待著我們?nèi)グl(fā)現(xiàn)和運(yùn)用。就操作界面來(lái)說(shuō)，再也僅僅不局限于美工的設(shè)計(jì)與制作，通過(guò)代碼我們能夠?qū)崿F(xiàn)系統(tǒng)和用戶(hù)間的信息交流，它所傳達(dá)的信息能讓人們理解并接受，也被稱(chēng)為人機(jī)接口[1]。很顯然，操作界面是人機(jī)交互的首要場(chǎng)所，正不斷得到各領(lǐng)域的關(guān)注，作為人機(jī)交互的接口，用戶(hù)與系統(tǒng)的信息交換始于此，其重要性不言而喻。如今，對(duì)于操作界面的設(shè)計(jì)越來(lái)越受重視，尤其是軟件設(shè)計(jì)行業(yè)。

本項(xiàng)目中，界面的設(shè)計(jì)使用青磚白墻黑瓦的“蘇式”風(fēng)格，封面內(nèi)容主要包括御窯金磚、蟋蟀罐、緙絲這三項(xiàng)御窯文化的典型代表，單擊相關(guān)圖標(biāo)都能通過(guò)文字、圖片、視頻三種方式了解其歷史沿革等?！坝G文化”圖標(biāo)主要向參觀者介紹御窯小學(xué)在“傳承御窯文化，爭(zhēng)創(chuàng)一流教育”過(guò)程中的點(diǎn)滴做法與取得的成績(jī)。單擊左側(cè)朱紅色的大門(mén)便可進(jìn)入勞技作品展示廳。事實(shí)上，為了讓參觀者能夠身臨其境，虛擬展廳內(nèi)部的環(huán)境與現(xiàn)實(shí)中的御窯文化展示廳高度相似。而本項(xiàng)目中對(duì)御窯文化的虛擬展示主要就是通過(guò)對(duì)展廳虛擬場(chǎng)景的設(shè)計(jì)和創(chuàng)建來(lái)實(shí)現(xiàn)的。

四、虛擬展廳的場(chǎng)景設(shè)計(jì)

（一）場(chǎng)景布局設(shè)計(jì)

虛擬展廳場(chǎng)景的布局設(shè)計(jì)必須遵循一定的秩序，在特定的空間內(nèi)，通過(guò)視覺(jué)傳達(dá)手段將預(yù)設(shè)的全部信息科學(xué)、合理地展現(xiàn)給用戶(hù)，力爭(zhēng)對(duì)用戶(hù)的心理和行動(dòng)起到積極的作用。這樣做是為了讓展示功能最終得以實(shí)現(xiàn)，其核心是怎樣高效的將需要表達(dá)的信息有效地傳遞給觀眾[2]。

在準(zhǔn)備階段，我們首先確定了項(xiàng)目的整體風(fēng)格為“蘇式江南風(fēng)”，并嚴(yán)格參照實(shí)景，對(duì)虛擬展廳將要實(shí)現(xiàn)的功能進(jìn)行了討論與規(guī)劃。本項(xiàng)目中，筆者手工繪制了展廳的平面圖并進(jìn)行了功能區(qū)域的劃分，在此基礎(chǔ)上運(yùn)用AutoCAD 2007對(duì)虛擬展廳的場(chǎng)景進(jìn)行布局。期間，項(xiàng)目組對(duì)虛擬展廳的布局進(jìn)行了反復(fù)的商討，為了充分發(fā)揮展廳的展示與學(xué)習(xí)功能，我們討論決定將展廳中央的操作臺(tái)換成了學(xué)校的特色教學(xué)項(xiàng)目“御窯金磚書(shū)寫(xiě)桌”。在多次修改之后，最終形成統(tǒng)一意見(jiàn)，將方案確定下來(lái)。由于展廳的主要用戶(hù)為學(xué)生和教師，因此，整個(gè)展廳的功能設(shè)計(jì)考慮御窯文化體驗(yàn)與學(xué)生勞技作品制作兩條主線(xiàn)。中式廊道、蘇式吊頂、金磚、花邊滴水瓦等，就是讓用戶(hù)在游覽中學(xué)習(xí)了解御窯文化。然而，展品上的視頻圖標(biāo)則是為學(xué)生的學(xué)習(xí)準(zhǔn)備，只要單擊圖標(biāo)便能播放御窯小學(xué)勞技教研組精心錄制并編輯的各種學(xué)習(xí)視頻，通過(guò)視頻了解這些物品的歷史與制作方法。

（二）虛擬場(chǎng)景構(gòu)建

展廳的各項(xiàng)虛擬交互功能由Unity3D來(lái)實(shí)現(xiàn)的。不過(guò)，由于Unity3D本身不能夠場(chǎng)景建模，因此建模的工作還需借助其它軟件來(lái)實(shí)現(xiàn)，本項(xiàng)目中的模型是運(yùn)用3ds Max 2014完成制作的。三維建模是虛擬現(xiàn)實(shí)技術(shù)中的一項(xiàng)重要研究[3]。如今，應(yīng)用市場(chǎng)上能進(jìn)行3D建模的軟件很多。Maya和3ds Max是其中的主流，很多專(zhuān)業(yè)設(shè)計(jì)師選用這兩款軟件進(jìn)行3D建模。作為兩款最受歡迎的建模軟件，兩者在功能上互有優(yōu)勢(shì)。就3ds Max而言，在構(gòu)建場(chǎng)景和為模型添加材質(zhì)方面比Maya具有更加便捷、高效的表現(xiàn);Maya則是制作3D動(dòng)畫(huà)的最佳選擇。根據(jù)兩款軟件的特點(diǎn)，本項(xiàng)目最終選用3ds Max制作三維模型，一方面是因?yàn)樗m合完成本項(xiàng)目中場(chǎng)景模型及相關(guān)展品模型的構(gòu)建，另一方面也是因?yàn)?ds Max軟件對(duì)于非專(zhuān)業(yè)人士而言更易理解，更好上手，而且它的功能強(qiáng)大，對(duì)計(jì)算機(jī)硬件的要求也不是很高。此外，除了能制作三維模型，用戶(hù)還能通過(guò)3ds Max中提供的腳本語(yǔ)言直接控制模型[4]。

五、三維游覽系統(tǒng)的設(shè)計(jì)

（一）設(shè)計(jì)思路

首先，對(duì)典型物品進(jìn)行拍照，運(yùn)用Photoshop CS制作好貼圖。然后，在確保與實(shí)景高度吻合的基礎(chǔ)上，運(yùn)用AutoCAD2007將虛擬展廳的平面圖繪制出來(lái)。完成布局圖與貼圖后，用3ds Max 2014對(duì)展廳進(jìn)行建模，并將建好的場(chǎng)景模型導(dǎo)出，儲(chǔ)存為FBX格式。隨后，在Unity3D平臺(tái)中導(dǎo)入事先保存好的FBX格式的場(chǎng)景模型，運(yùn)用Unity3D軟件為場(chǎng)景添加照明、燈帶等效果，完成燈光渲染與烘焙，最后進(jìn)行代碼的編寫(xiě)，實(shí)現(xiàn)在虛擬展廳中的移動(dòng)控制以及操作界面中功能菜單和導(dǎo)航欄的交互功能等。這樣，虛擬展廳就實(shí)現(xiàn)了自主游覽及人機(jī)交互的功能。完成以上工作后，在Unity3D平臺(tái)上將文件打包發(fā)布，保存為EXE格式的可執(zhí)行文件，當(dāng)然如果要掛在校園網(wǎng)上的話(huà)，可以發(fā)布成網(wǎng)絡(luò)文件。至此，整個(gè)三維游覽系統(tǒng)就制作完成了。本系統(tǒng)的場(chǎng)景逼真，交互內(nèi)容豐富，操作簡(jiǎn)便，并成功實(shí)現(xiàn)了3D展示、互動(dòng)學(xué)習(xí)等功能，滿(mǎn)足學(xué)生自主學(xué)習(xí)和教師輔助教學(xué)的需要。此外，本系統(tǒng)的開(kāi)發(fā)周期短，對(duì)開(kāi)發(fā)人員的專(zhuān)業(yè)知識(shí)要求不高，也不需要投入大量的開(kāi)發(fā)資金，適合在基礎(chǔ)教育階段的公辦學(xué)校內(nèi)推廣。

（二）開(kāi)發(fā)流程

與普通的程序開(kāi)發(fā)相比，三維虛擬程序的開(kāi)發(fā)需要考慮更多的因素，過(guò)程相對(duì)復(fù)雜。在編寫(xiě)基本程序的同時(shí)，必須考慮模型顯示、人機(jī)交互、物理運(yùn)算等邏輯關(guān)系[6]。本系統(tǒng)中，Unity3D的開(kāi)發(fā)過(guò)程包含兩個(gè)方面：一是導(dǎo)入制作好的貼圖素材和展廳模型，二是為虛擬展廳實(shí)現(xiàn)游覽、交互等相關(guān)功能。導(dǎo)入素材及模型指的是把Photoshop CS軟件中處理好的貼圖素材和3ds Max 2014中制作好的展廳模型一同導(dǎo)入到 Unity3D軟件中，貼圖素材推薦使用PNG格式，模型格式使用FBX格式。功能實(shí)現(xiàn)階段的重點(diǎn)工作就是相關(guān)程序的編寫(xiě)，這里值得注意的是，在編寫(xiě)代碼時(shí)，要從需求分析著手，用軟件工程的想法通盤(pán)考慮開(kāi)發(fā)過(guò)程[7]。

我們收集了大量與御窯文化相關(guān)的資料，為項(xiàng)目的開(kāi)發(fā)做好充分的準(zhǔn)備。在登錄界面上，我們展示了三件具有御窯文化特色代表性的物件，并以蘇式朱紅色大門(mén)作為虛擬展廳的入口。在虛擬展廳中，我們根據(jù)御窯傳統(tǒng)文化和手工藝作品的展示需要，結(jié)合小學(xué)勞技課程指導(dǎo)綱要，以及小學(xué)生的認(rèn)知特點(diǎn)，運(yùn)用3ds Max 2014對(duì)展廳場(chǎng)景及展品進(jìn)行建模，隨后，通過(guò)Unity3D平臺(tái)完成三維游覽系統(tǒng)的制作。需要注意的是，為了讓用戶(hù)體驗(yàn)到真實(shí)感，虛擬展廳要做到盡可能還原御窯文化展示廳的真實(shí)面貌，我們?cè)趯?duì)模型進(jìn)行貼圖操作時(shí)要根據(jù)模型特點(diǎn)選擇合適的素材，比如展廳內(nèi)中式廊道柱子的材質(zhì)與金磚書(shū)寫(xiě)板桌面的材料相近，但我們不能使用同樣的貼圖，根據(jù)嚴(yán)格按照實(shí)物特點(diǎn)選擇貼圖。所以，取樣的時(shí)候一定要多拍一些照片，用Photoshop多制作些貼圖素材。此外，在為復(fù)雜的模型貼圖時(shí)，要學(xué)會(huì)隨機(jī)應(yīng)變，靈活處理。所有貼圖工作要嚴(yán)格按照設(shè)計(jì)方案有序進(jìn)行。在Unity3D平臺(tái)上開(kāi)發(fā)制作，全程都是可視的，開(kāi)發(fā)者可以一邊開(kāi)發(fā)一邊測(cè)試，直至項(xiàng)目的最終完成。

整個(gè)開(kāi)發(fā)過(guò)程為：在Photoshop CS中制作貼圖素材，保存為PNG格式;在AutoCAD 2007中繪制平面圖形;在3ds Max 2014中對(duì)場(chǎng)景進(jìn)行建模并完成貼圖后發(fā)布為FBX 格式的文件;在Unity3D中導(dǎo)入FBX文件，對(duì)場(chǎng)景模型進(jìn)行烘焙與渲染，隨后進(jìn)行三維游覽系統(tǒng)的開(kāi)發(fā)，完成各項(xiàng)檢測(cè)后打包發(fā)布成EXE文件。

參考文獻(xiàn)：

[1]劉偉，莊達(dá)民，柳忠起.人機(jī)界面設(shè)計(jì)[M].北京郵電大學(xué)出版社，2011.

[2]郭磊，張春紅.基于Web3D技術(shù)的企業(yè)虛擬展廳設(shè)計(jì)[J].科技傳播，2011.