基于AR技術的家居購物平臺的設計與實現

張圣銘　陳潤　萬神蔭　周景豪　陳康東

摘要：增強現實技術（AR）的興起，實現了二維與三維物品之間的交互，為各行各業提供了無限的可能。AR家居購物平臺，將AR技術所帶來的實時交互與沉浸式的體驗與互聯網購物相結合，實現任意虛擬物品與現實場景交互。根據目前的需求與設計與開發了一款基于AR技術的家居購物系統，平臺基于增強現實分布式框架技術，實現移動端增強現實應用;結合家居3D建模技術，將家居的完整形態進行建模，并通過AR技術將建模成果進行展示，給予用戶身臨其境的購物體驗。

關鍵詞：增強現實;家居購物;移動技術;三維建模;微信小程序

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

文章編號：1009-3044（2022）07-0073-03

1 背景

隨著近年來科技的不斷進步，增強現實（augmentedreality ，AR）技術可以將虛擬的物體合并到現實場景中，并能支持用戶與其進行交互，它已經成為虛擬現實研究中的一個重要領域，也是人機界面技術發展的一個重要方向[1]。近年來，互聯網購物正慢慢成為人們生活中購物的首選方式。自從2015年互聯網家裝元年以來，家居購物行業更是久盛不衰。但家居購物在互聯網購物平臺中，都存在一個普遍問題：用戶無法通過實地對比的方式，將商品尺寸與家庭構造進行比較，在商品購買后存在較多問題。因此，通過AR技術將家居商品合并顯示在現實場景中，給予用戶與家居商品交互的過程，能夠幫助用戶更好地挑選商品，提高用戶的購物體驗。

2 平臺分析

基于AR技術開發的軟件在設計與開發中，普遍存在一個難點：如何在兼顧AR技術特性下，將該技術系統嵌入到購物平臺中，并在購物平臺中發揮出該項技術的優勢。在本平臺的設計初期，三維建模與AR技術的融合成為解決該問題的主要方法。

2.1 平臺設計原則

作為基于AR技術的家居購物平臺，平臺在設計的過程中需要考慮并完善以下要素：

1） 現實與虛擬的融合

AR技術作為家居購物平臺的主要技術，在設計過程中應將技術與購物情景相融合，減少由于技術應用帶來的商品參數錯誤、商品呈現效果不佳等問題。因此，在平臺的設計過程中，應該著重考慮AR技術的呈現方式以及如何和商品進行良好結合，以完成優化用戶購物體驗的目標。

2） 商品與用戶的交互

AR技術可以根據不同的體現方式，選擇不同的物理載體，如：頭盔顯示器、電腦、智能手機等。其中，攝像頭是增強現實技術最重要的硬件設備[2]。因此，在設計家居購物平臺時，首先要根據其終端特性進行選擇，進而調整不同的商品呈現方式以及購物操作方式。其次，商品與用戶的交互是必不可少的一點。用戶在購物過程中，良好的交互能夠為用戶帶來良好的購物體驗，進而提升用戶的購買欲望。

3） 推送機制

在購物軟件中，良好的推送機制能夠帶來意想不到的效果。移動電商個性化推薦服務雖然具有針對性，但推薦方式選擇不當，消費者會產生抵觸，所以尋找到消費者接受個性化推薦的因素格外重要[3]。在滿足個性化推薦的同時，可以通過優化推送方式，將商品推送給消費者。

4） 感官體驗

在開發平臺過程中，注重用戶在使用平臺的感官感受是尤為重要的一點。好的感官體驗能夠為用戶帶來更舒適的購物體驗，增加用戶的購買欲望。因此，在開發過程中，用戶可以在購物場景中感受到逼真的商品界面以及真實的購物音效，全面的感官刺激能夠為用戶營造一個深度的購物情景。

2.2 平臺分析

本平臺名稱為“飾家”，設計初衷主要為解決以下問題：

1） 利用三維建模技術將產品進行建模，并通過AR技術將商品呈現在用戶面前，在線上為用戶提供身臨其境的購物體驗。

2） 提供更加便捷方便的購物體驗，打造屬于家居購物的垂直社區，為家居設計提供交流的平臺。為用戶提供設計理念，根據用戶的設計需求，挑選出最適用的家居和設計方案。

3） 減少因家居尺寸問題而導致的退換貨，減少用戶購物和布置家居時所產生的不愉快體驗。

4） 利用舊家具等進行翻新，在滿足用戶個人訂制想法的同時，提高了能源的循環利用，降低用戶的購物支出。

2.3 平臺設計

飾家平臺主要分為云服務器和小程序端。云服務器中采用JAVA作為主要開發語言。采用經典Spring、SpringMVC、MyBatis框架進行開發，且在開發過程中遵循MVC（Model-View-Controller）開發模式，包括邏輯層，視圖層，基礎層等，如圖1所示，極大提高了平臺的穩定性和開發速率。采用JavaScript作為本平臺的邏輯層的主要編寫語言，用于與視圖層進行交互，并將處理數據發送到視圖層，視圖層對處理的數據進行反饋。其中小程序端的主要功能用作與用戶交互，用戶可以直接使用的功能包括登錄、注冊、挑選商品等。云服務器主要用于處理較為復雜的業務邏輯如AR功能的調用、用戶或商品數據的處理，系統安全等。

2.4 平臺功能

飾家平臺主要分為四大模塊：個人主頁、發現社區、工藝坊、家居購物，平臺的主要功能架構，如圖2所示：

個人主頁：該模塊主要針對用戶個人業務，在此功能模塊中用戶可以對自己的訂單進行查看、刪除等管理操作;查詢所購買商品的物流動態、預計到達時間等物流信息;還可以點擊商家入駐，入駐飾家平臺。

發現社區：社區模塊主要為用戶提供交流功能，在此模塊平臺根據用戶的需求和平時閱讀習慣，為他推薦相關風格的家居以及房屋方案。除此之外，用戶還可以在問答中心進行提問或者回答他人的問題。私人訂制功能可以滿足大多數用戶自己定制家居的需求，并且可以將完成后的效果圖分享到社區中，打造屬于家居的垂直內容社區。

工藝坊：工藝坊模塊主要為AR功能模塊，在此模塊用戶可以使用AR尋家功能，進行個人房屋內家居的擺放和對比，并可將生成的效果圖保存到電子圖紙中，以便日后查詢或供他人查看。房屋建模功能可以幫助用戶根據自己的戶型等比例構造出房屋模型，從而根據需求進行購物。

家居購物：用戶可以根據自己的需求進行分類搜索，挑選出適合或心愛的家居，選定家居后可以使用平臺所搭載的AR功能查看家居的特點和細節。在購物詳情頁還可以查看其他用戶的評論，完成購物后，用戶也可進行評論。

3 平臺實現

平臺主要采用前后端分離的形式進行設計。

3.1 平臺的前端設計

平臺前端主要采用微信小程序自帶界面設計，每個界面由四個文件組成，js文件，wxml文件，wxss文件以及json文件，四個文件分別對應頁面邏輯、頁面結構、頁面樣式、頁面配置。平臺開發所使用的組件來自微信原生WeUI樣式庫和阿里矢量圖標庫，讓用戶的使用感知更加統一的基礎上，創造出飾家平臺的特色。以下為引用代碼：

npm install weui-miniprogram

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

{"usingComponents"： {

"mp-dialog"： "../../miniprogram_npm/weui-miniprogram/dialog/dialog"}

}

@font-face {font-family： "iconfont";

src： url（'iconfont.eot？t=1537179845858'）;

src： url（'iconfont.eot？t=1537179845858#iefix'） format（'embedded-opentype'）， /*

url（'iconfont.ttf？t=1537179845858'） format（'truetype'），? url（'iconfont.svg？t=1537179845858#iconfont'） format（'svg'）;

}

3.2 平臺的后臺設計

本平臺后臺主要用于接收、存儲和處理數據，并將處理過后的數據發送到視圖層，視圖層再進一步對處理的數據進行反饋。本平臺所使用的數據庫為MySQL數據庫，數據庫部署在騰訊云服務器中，微信小程序接入數據庫代碼如下：

onLoad： function （options） {

var that = this

wx.request（{

url： ''，

data： {}，

header： {

'content-type'： 'application/json'

}，

success： function（res） {

console.log（res.data）

that.setData（{

info： res.data

}）}，

fail： function（err） {

console.log（err）

}}）}，

本平臺使用微信支付作為購物的主要付款方式。前端發起微信支付API的調用，服務器接收到調用的請求后，從數據庫中傳輸相應的JSON返回到前臺進行使用，從而完成微信支付。調用微信支付API代碼如下：

wx.requestPayment

（{

"timeStamp"： ""，

"nonceStr"： ""，

"package"： "prepay_id "，

"signType"： "RSA"，

"paySign"： "，

"success"：function（res）{}，

"fail"：function（res）{}，

"complete"：function（res）{}

}）

4 平臺的詳細介紹

飾家平臺主要功能有幾大板塊：AR尋家、社區交流、私人訂制、商品推送。

4.1 AR尋家功能模塊

AR模塊是飾家平臺的一個重要功能。該功能主要基于AR技術與三維建模技術進行開發，將商品詳細參數通過建模的形式進行構建，并將構建好的商品通過AR技術呈現在用戶面前。該功能為平臺的主要購物功能，對所有用戶開放，效果圖如圖3所示。

用戶可以根據個人需求，對家居和房屋進行條件選擇，挑選出最適合自己的家居商品。配合飾家平臺所帶的攝像頭功能，對家居進行位置擺放的測試，查看家居是否適合擺放于此，實現增強現實購物。同時，用戶可以將擺放好的位置，方便用戶后期修改和查看。

4.2 個人中心模塊

在個人中心模塊，本平臺采用與以往不同的設計方案，利用不同顏色將模塊進行劃分，將物流管理、訂單系統、購物記錄、常用功能等劃分為不同區域，顏色板塊能夠讓用戶更加直觀地查看信息。除此之外，用戶能夠在此界面，完成訂單管理等基本功能，對訂單進行篩選、查看或刪除等操作。亦可在常用功能中，選擇商家入駐或電子圖紙等功能。簡單明了的功能，增加了平臺的可用性。

4.3 私人訂制模塊

在私人訂制模塊，飾家為用戶提供了多樣化的訂制方案。用戶可以根據自己的想法上傳自己所設計的訂制項目初稿，并根據初稿形狀挑選所用材質、顏色、架構等，一步一步完善自己的訂制方案。在訂制期間，如遇到不滿意的問題，可以點擊刪除按鈕，刪除掉不滿意部分，也可通過調整比例，重新為家居調整滿意的比例和布局。除此之外，用戶可以選擇將家中所有的閑置家居等進行二次創作，賦予舊家具新的生命。

4.4 商品推送模塊

以智能化手機為代表的智能移動設備已經成為用戶滿足絕大多數基本需求的第一設備，其所加載的軟件也在進入“沉浸式”[4]。 為了向用戶提供更多沉浸式體驗，提高用戶的購物體驗。平臺推送過程中采用了基于內容進行分析的協同過濾算法，通過算法對用戶的瀏覽產品等習慣進行分析，如：瀏覽產品的時間、搜索內容、瀏覽產品的次數等，進而為用戶推薦最佳優質商品。

5 結束語

增強現實技術應用于網絡購物，能夠提高網絡購物的服務質量，創造更大的經濟效應[5]。本平臺結合增強現實技術與3D建模技術，極大程度還原了商品呈現在家中的真實效果，給予用戶不一樣的購物感官體驗，開創全新的購物方式。

參考文獻：

[1] 朱淼良，姚遠，蔣云良.增強現實綜述[J].中國圖象圖形學報，2004，9（7）：767-774.

[2] 周忠，周頤，肖江劍.虛擬現實增強技術綜述[J].中國科學：信息科學，2015，45（2）：157-180.

[3] 趙沁平.移動電商個性化推薦對消費者購買醫院影響分析[J].商業經濟研究，2018（6）：54-57.

[4] 王燦.移動信息聚合平臺研究[J].中國出版，2016（24）：22-25.

[5] 趙浩天.基于多因素模型的增強現實技術應用于網絡購物的經濟效益評估[J].河南科技，2019（19）：24-26.

【通聯編輯：謝媛媛】

收稿日期：2021-12-08

基金項目：廣東省大學生創新訓練計劃項目國家級項目——基于OCR文字識別和深度學習的錯題識別趣味解答與推薦學習一體化應用（項目編號：S202013902008）

作者簡介：張圣銘（2001—），男，廣東惠州人，本科在讀，主要研究方向為Web前端開發;陳潤（1985—），男，廣東雷州人，講師，碩士，主要研究方向為網絡安全;萬神蔭（1999—），男，湖南岳陽人，本科在讀，主要研究方向為Web前端開發;周景豪（1999—），男，廣東廣州人，本科在讀，主要研究方向為java后臺開發;陳康東（2000—），男，湖南岳陽人，本科在讀，主要研究方向為人工智能與大數據算法。