3D體驗式旅游小程序的研發

葉木林，洪宏，李芳芳，丁雨露，劉妍，孫悅

摘要：由于經濟的迅速發展，旅游的人也越來越多。為了便利人們旅游，該文基于微信小程序和3D建模技術設計一款旅游類線上3D小程序。目前互聯網技術已經應用于百姓生活的方方面面，相較于傳統的旅游來說，3D體驗式旅游小程序直達民眾、易于傳播、更能減少中間流程，讓更多的人可以看到景區美好的風景。旅游形式新穎，帶來不一樣的體驗。

關鍵詞：微信小程序；3D建模；云旅游

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2022）33-0045-03

隨著科技的發展，人民生活水平提高，在解決溫飽的前提下，人們更多地選擇去追求精神的享受。旅游作為一項娛樂項目，近年來發展蓬勃，成為不少地區帶動經濟發展的主力軍。中國地域遼闊，景點也是數不勝數，每當假期來臨，大多數人休假的首選便是去旅游[1]。該團隊成員都喜歡旅游，經常為假期出行選目的地而苦惱。經過大量走訪調查，調查人員發現大部分人也有這種苦惱。而且因為新冠肺炎疫情的原因，出去旅游會導致大量人群聚集，不利于疫情防控。因此該團隊準備研發出一款旅游類微信小程序，可以3D全景沉浸式體驗旅游，無須面臨線下出行的所有壓力，一個小程序，就可以把游客帶到想去的任何景點。不僅如此，該款小程序還加入了中草藥模擬人物的新穎形式，給用戶帶來不一樣的體驗。沉浸式體驗、旅游攻略全覽、旅游紀念品購買、旅行足跡生成、旅游打卡、景點優惠購票、住宿交通等一站式旅游，省下時間金錢與精力，盡情享受輕松歡樂的旅行。

1關鍵技術簡介

1.1 技術框架

該小程序采用3D建模技術來搭建框架。3D建模通俗來講就是三維制作軟件通過虛擬三維空間構建出具有三維數據的模型[2]。常用的商業3D軟件有3DMAX、Rhino以及ZBrush，CAD 軟件有AutoCAD、Solidworks、Servlet、TurboCAD 、Deluxe[3]。本項目應用這方面的知識，同時利用各個平臺及軟件上的資源。將通過走訪調查、評論留言、打卡等方法來分析該項目的實際運行情況。用戶可以使用Servlet來實現登錄、注冊和留言。評論留言及打卡等功能需要用戶注冊賬戶、登錄后才可以使用。

1.2宣傳方式

該項目的宣傳形式將利用媒介、活動、公關、新聞的資源進行宣傳，其中廣告宣傳為主要宣傳方式。通過在線投放引擎（Online Serving Engine）實時響應請求，完成決策，離線分布式計算（Distributed Computing）數據處理平臺，在線實時流式計算（Stream Computing）平臺數據總線（Data Bus）連接和傳輸以上三部分數據流實現。

1.3數據庫技術

小程序具有查詢功能，需要用到數據庫中的實地場景知識和關于藥材的知識，應用程序與數據庫建立連接之后，需要使用JDBC提供的API與數據庫交互信息，可以查詢、修改和更新數據庫中的數據等。使用SQL語句讓JDBC與數據庫進行交互，JDBC提供的API可以將標準的SQL語句發送給數據庫，實現與數據庫的交互[4]。

2微信小程序的模塊及功能設計

2.1首頁頁面板塊

首頁界面具有基本查詢功能，分別是旅游、攻略、購物、打卡、購票五個基本功能區和上方搜索框方便用戶隨時搜尋想要找到的功能（圖1）。上方搜索框之下放置了流動圖片展示區，用于展示不同景區的風光，吸引用戶駐足并安排相關旅游事項。頁面簡潔明了，一定程度上更加利于用戶大腦提取利用最需要的信息，快速找到自己需要的內容。不同的功能模塊亦呈現著不同的具體信息，例如：點擊旅游模塊即進入由用戶自己操作的自由旅游模式，進入到該選項界面中，用戶便可進行對自己感興趣的景區進行搜索，同時本團隊也會運用大數據的方式對用戶進行熱門旅游景區的推薦。在進入旅游景區后用戶可以選擇自己感興趣的虛擬人物，選擇自助旅行（即由用戶自行操控虛擬人物，進行景點游覽）或智能旅行（即虛擬人物通過程序設定的路線來帶領游客進行景點游覽）。在游覽過程中每到一個景區的特色景點時，用戶便可選擇是否需要虛擬人物進行解說，該小程序也設置了付費解鎖內容，來提高景點的吸引力，這也是本小程序的點睛之筆。攻略模塊中有不同用戶及旅游達人整理出的不同城市的旅游攻略，供想要旅游的用戶選擇。購物模塊中用戶可在其中購買景點或城市的熱門周邊及特產，足不出戶就能購買到想要的旅游業產品，同時也可以給在3D旅游體驗的用戶們提供更多了解景區的選擇，讓用戶們身臨其境。打卡模塊中用戶可看到自己的旅游足跡，生成自己的旅游地圖，也可在其中找到目的地的熱門打卡地，在里面可以看到曾經去過相關景點的用戶分享他們的旅游心得和他們認為的一些雷點，開放評論功能，便于用戶和分享者進行交流。購票模塊中用戶可在其中購買往返目的地的車票及旅游景點的門票，免去了一部分排隊購票的時間，用戶可根據需求來選擇，給了用戶一個新的選擇方式，提供新的一站式旅游服務。

2.2資料共享頁面模塊

小程序中，資料共享頁面被命名為“發現”（如圖2）。在“發現”內，用戶及簽約的旅游打卡博主可以自己上傳旅游景點或相關城市的圖片或打卡視頻攻略，用戶可以在這個模塊中找到想要去的景區的攻略，得到很多種草，在不知道想要去哪里時也可以在這個界面找到答案。用戶在進行了一趟美好的旅游后也可在這個模塊中發布自己的旅游攻略及旅途中拍攝的風景照等，給其他用戶分享旅游心得。

2.3個人操作頁面模塊

小程序內，個人操作頁面被命名為“我的”（如圖3）。在“我的”內，用戶可以先進行登錄，登錄完成后，可在界面內查看“個人資料”“卡包”“設置”等模塊，用戶可以進行個人信息的修改，卡包的綁定及其他一些個性化的設置。

2.4功能技術實現

2.4.1用戶登錄

用戶進入小程序時，先出現一個歡迎界面，在“我的”頁面中提供登錄功能，通過微信的wx.getUserInfo（object）接口確認用戶授權獲取用戶頭像、昵稱、性別等基本信息進入主頁面。

2.4.2頁面框架

在app.json中“pages”屬性中注冊一些用戶頁面。主要頁面包括：

1）home.wxml，首頁在用戶進入小程序時第一展示的界面為首頁，首頁為用戶提供清楚的信息流。

2）fine.wxml，發現頁面是景點視頻展示區，為用戶分享實景。

3）me.wxml，我的頁面是用戶信息展示區，也為用戶提供卡包功能。

主要頁面組成代碼如下：

{

"pages"：[

pages/hoME/home，

pages/fid/find，

"pages/ME/me"，

"pages/LOGIN/login"，

"pages/SHOP/shop"，

"pages/WAY/way"

]，

底欄設計代碼如下：

"tabBar"：

"list"：

text”：“首頁，

"pagePath"： "pages/HOME/home"，

iconPath"：“img/首頁png”，

selectedIconPath"："img/首頁png

}，

text：“發現，

pagePath"： "pages/FIND/find"，

iconPath"：“img/搜索png”，

selectedIconPath"：“img/搜索.png

text：“我的“，

pagePath"： "pages/ME/m

iconPath"：img/用戶png”，

selectedIconPath"："img/用戶png

}

2.4.3頁面設計

1）“首頁”設計

首頁界面，提供一個全局搜索框，用戶可以在此搜索景點、票務和其他用戶等信息。全局搜索框下部提供滑塊視圖容器swiper，使用swiper-item組件，以及image組件進行首頁圖片的展示。圖片展示使用wx：for="{{dis_img_list}}"功能為首頁圖片提供循環展示。圖片可以展示優秀景點，image組件使用bindtap綁定點擊“click_jump”函數。在home.js中添加click_jump函數進行頁面跳轉至相應的介紹界面。

2）“發現”設計

發現界面，提供景點視頻展示，發現界面在一個view容器里，提供多個媒體組件video，調用VideoContext.play（）接口進行優質視頻內容展示。視頻上傳，發現界面支持用戶從手機上傳視頻到服務器中，使用wx.chooseMedia（Object object）API拍攝或從手機相冊中選擇圖片或視頻。

視頻選擇代碼如下：

getVideo（e）{

wx.chooseMedia（{

count： 9，

mediaType： ['video']，

sourceType： ['album'， 'camera']，

maxDuration： 30

camera： 'back'

success（res）{

console. log（res. tempFiles. tempFilePath）

console. log（res. tempFiles. size）

}）

3）“我的”設計

我的界面主要展示用戶個人信息。wx.getUserInfo（object）獲取用戶信息，使用object.success 回調函數對me.js中用戶信息進行初始化。在me.wxml進行界面進行用戶信息展示。用戶除使用微信昵稱、頭像外，還支持用戶進行頭像上傳，昵稱修改。“我的”界面提供卡包功能，方便用戶使用。

2.4.4評論交流技術的實現

在發現頁面，用戶觀看同時，可以對視頻進行評論。這個內容的實現需要給用戶一個文本框，用戶僅需要在里面輸入內容即可。根據request請求從后臺獲取到用戶輸入的信息，再用print函數將其輸出即可。通過定時刷新該頁面，縮短刷新時間間隔，提高刷新頻率，使用戶可以及時看見自己的評論。

關于交流評論的關鍵代碼如下：

discussAction：function（e）{console.log（“點擊評論”）;wx .showToast（f

title："評論成功”，icon："none”

））

This.setData（i

discussionShow：true;}）

<view wx ：if-'{fdiscussionShow}}’>

<view class="view"style=*bottom：{finput_bottom}}rpx’wx：if="{{discussionShow}}">

（textarea class content”cursor-spacing-"30”fixed -"true”focus ”（discussionStou）}”placehorder-”優質評論可以幫助作者獲得更高權重以<text bindtap-"send">發送</text></view>

3結束語

在人民生活水平的逐步提高的今天，旅游逐漸成了人們假期的一項占比很大的娛樂活動，近年來我國旅游業規模顯著提高，同時也對旅游模式提出了新要求，“3D旅游”應運而生。隨著互聯網技術的發展及3D建模技術的不斷成熟，旅游也將不再局限于實地欣賞[5]。該產品不僅可以向用戶提供線下旅游服務還可供用戶足不出戶便可沉浸式感受景點美景，為時間緊張卻想要放松旅游的人、熱愛美景卻苦于舟車勞頓的人提供了一種新的旅游思路。除此之外，現如今新冠肺炎疫情不斷反復，線上旅游既滿足了人們旅游的需求，又響應了相關政策。

參考文獻：

[1] 國家旅游局.旅游設施與服務：LB/T 005—2011 LB/T 008～079—2011[S].北京：中國標準出版社，2011.

[2] 杜劍波.一種支撐穩定的面部3D建模矯正裝置：CN214579818U[P].2021-11-02.

[2] 杜劍波.一種支撐穩定的面部3D建模矯正裝置：CN214579818U[P].2021-11-02.

[4] 劉靜，王家賢，韓朱忠.一種數據庫監控方法，裝置，服務器及介質：CN112540897A[P].2021-03-23.

[5] 趙雙燕，賈金原，周文.Web3D家居素材庫的輕量化技術研究[J].鄭州大學學報（工學版），2019，40（1）：12-17.

【通聯編輯：光文玲】