基于AR技術(shù)的家居購(gòu)物平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

張圣銘　陳潤(rùn)　萬神蔭　周景豪　陳康東

摘要：增強(qiáng)現(xiàn)實(shí)技術(shù)（AR）的興起，實(shí)現(xiàn)了二維與三維物品之間的交互，為各行各業(yè)提供了無限的可能。AR家居購(gòu)物平臺(tái)，將AR技術(shù)所帶來的實(shí)時(shí)交互與沉浸式的體驗(yàn)與互聯(lián)網(wǎng)購(gòu)物相結(jié)合，實(shí)現(xiàn)任意虛擬物品與現(xiàn)實(shí)場(chǎng)景交互。根據(jù)目前的需求與設(shè)計(jì)與開發(fā)了一款基于AR技術(shù)的家居購(gòu)物系統(tǒng)，平臺(tái)基于增強(qiáng)現(xiàn)實(shí)分布式框架技術(shù)，實(shí)現(xiàn)移動(dòng)端增強(qiáng)現(xiàn)實(shí)應(yīng)用;結(jié)合家居3D建模技術(shù)，將家居的完整形態(tài)進(jìn)行建模，并通過AR技術(shù)將建模成果進(jìn)行展示，給予用戶身臨其境的購(gòu)物體驗(yàn)。

關(guān)鍵詞：增強(qiáng)現(xiàn)實(shí);家居購(gòu)物;移動(dòng)技術(shù);三維建模;微信小程序

中圖分類號(hào)：TP311.56? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）07-0073-03

1 背景

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

2 平臺(tái)分析

基于AR技術(shù)開發(fā)的軟件在設(shè)計(jì)與開發(fā)中，普遍存在一個(gè)難點(diǎn)：如何在兼顧AR技術(shù)特性下，將該技術(shù)系統(tǒng)嵌入到購(gòu)物平臺(tái)中，并在購(gòu)物平臺(tái)中發(fā)揮出該項(xiàng)技術(shù)的優(yōu)勢(shì)。在本平臺(tái)的設(shè)計(jì)初期，三維建模與AR技術(shù)的融合成為解決該問題的主要方法。

2.1 平臺(tái)設(shè)計(jì)原則

作為基于AR技術(shù)的家居購(gòu)物平臺(tái)，平臺(tái)在設(shè)計(jì)的過程中需要考慮并完善以下要素：

1） 現(xiàn)實(shí)與虛擬的融合

AR技術(shù)作為家居購(gòu)物平臺(tái)的主要技術(shù)，在設(shè)計(jì)過程中應(yīng)將技術(shù)與購(gòu)物情景相融合，減少由于技術(shù)應(yīng)用帶來的商品參數(shù)錯(cuò)誤、商品呈現(xiàn)效果不佳等問題。因此，在平臺(tái)的設(shè)計(jì)過程中，應(yīng)該著重考慮AR技術(shù)的呈現(xiàn)方式以及如何和商品進(jìn)行良好結(jié)合，以完成優(yōu)化用戶購(gòu)物體驗(yàn)的目標(biāo)。

2） 商品與用戶的交互

AR技術(shù)可以根據(jù)不同的體現(xiàn)方式，選擇不同的物理載體，如：頭盔顯示器、電腦、智能手機(jī)等。其中，攝像頭是增強(qiáng)現(xiàn)實(shí)技術(shù)最重要的硬件設(shè)備[2]。因此，在設(shè)計(jì)家居購(gòu)物平臺(tái)時(shí)，首先要根據(jù)其終端特性進(jìn)行選擇，進(jìn)而調(diào)整不同的商品呈現(xiàn)方式以及購(gòu)物操作方式。其次，商品與用戶的交互是必不可少的一點(diǎn)。用戶在購(gòu)物過程中，良好的交互能夠?yàn)橛脩魩砹己玫馁?gòu)物體驗(yàn)，進(jìn)而提升用戶的購(gòu)買欲望。

3） 推送機(jī)制

在購(gòu)物軟件中，良好的推送機(jī)制能夠帶來意想不到的效果。移動(dòng)電商個(gè)性化推薦服務(wù)雖然具有針對(duì)性，但推薦方式選擇不當(dāng)，消費(fèi)者會(huì)產(chǎn)生抵觸，所以尋找到消費(fèi)者接受個(gè)性化推薦的因素格外重要[3]。在滿足個(gè)性化推薦的同時(shí)，可以通過優(yōu)化推送方式，將商品推送給消費(fèi)者。

4） 感官體驗(yàn)

在開發(fā)平臺(tái)過程中，注重用戶在使用平臺(tái)的感官感受是尤為重要的一點(diǎn)。好的感官體驗(yàn)?zāi)軌驗(yàn)橛脩魩砀孢m的購(gòu)物體驗(yàn)，增加用戶的購(gòu)買欲望。因此，在開發(fā)過程中，用戶可以在購(gòu)物場(chǎng)景中感受到逼真的商品界面以及真實(shí)的購(gòu)物音效，全面的感官刺激能夠?yàn)橛脩魻I(yíng)造一個(gè)深度的購(gòu)物情景。

2.2 平臺(tái)分析

本平臺(tái)名稱為“飾家”，設(shè)計(jì)初衷主要為解決以下問題：

1） 利用三維建模技術(shù)將產(chǎn)品進(jìn)行建模，并通過AR技術(shù)將商品呈現(xiàn)在用戶面前，在線上為用戶提供身臨其境的購(gòu)物體驗(yàn)。

2） 提供更加便捷方便的購(gòu)物體驗(yàn)，打造屬于家居購(gòu)物的垂直社區(qū)，為家居設(shè)計(jì)提供交流的平臺(tái)。為用戶提供設(shè)計(jì)理念，根據(jù)用戶的設(shè)計(jì)需求，挑選出最適用的家居和設(shè)計(jì)方案。

3） 減少因家居尺寸問題而導(dǎo)致的退換貨，減少用戶購(gòu)物和布置家居時(shí)所產(chǎn)生的不愉快體驗(yàn)。

4） 利用舊家具等進(jìn)行翻新，在滿足用戶個(gè)人訂制想法的同時(shí)，提高了能源的循環(huán)利用，降低用戶的購(gòu)物支出。

2.3 平臺(tái)設(shè)計(jì)

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

2.4 平臺(tái)功能

飾家平臺(tái)主要分為四大模塊：個(gè)人主頁、發(fā)現(xiàn)社區(qū)、工藝坊、家居購(gòu)物，平臺(tái)的主要功能架構(gòu)，如圖2所示：

個(gè)人主頁：該模塊主要針對(duì)用戶個(gè)人業(yè)務(wù)，在此功能模塊中用戶可以對(duì)自己的訂單進(jìn)行查看、刪除等管理操作;查詢所購(gòu)買商品的物流動(dòng)態(tài)、預(yù)計(jì)到達(dá)時(shí)間等物流信息;還可以點(diǎn)擊商家入駐，入駐飾家平臺(tái)。

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

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

家居購(gòu)物：用戶可以根據(jù)自己的需求進(jìn)行分類搜索，挑選出適合或心愛的家居，選定家居后可以使用平臺(tái)所搭載的AR功能查看家居的特點(diǎn)和細(xì)節(jié)。在購(gòu)物詳情頁還可以查看其他用戶的評(píng)論，完成購(gòu)物后，用戶也可進(jìn)行評(píng)論。

3 平臺(tái)實(shí)現(xiàn)

平臺(tái)主要采用前后端分離的形式進(jìn)行設(shè)計(jì)。

3.1 平臺(tái)的前端設(shè)計(jì)

平臺(tái)前端主要采用微信小程序自帶界面設(shè)計(jì)，每個(gè)界面由四個(gè)文件組成，js文件，wxml文件，wxss文件以及json文件，四個(gè)文件分別對(duì)應(yīng)頁面邏輯、頁面結(jié)構(gòu)、頁面樣式、頁面配置。平臺(tái)開發(fā)所使用的組件來自微信原生WeUI樣式庫和阿里矢量圖標(biāo)庫，讓用戶的使用感知更加統(tǒng)一的基礎(chǔ)上，創(chuàng)造出飾家平臺(tái)的特色。以下為引用代碼：

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 平臺(tái)的后臺(tái)設(shè)計(jì)

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

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）

}}）}，

本平臺(tái)使用微信支付作為購(gòu)物的主要付款方式。前端發(fā)起微信支付API的調(diào)用，服務(wù)器接收到調(diào)用的請(qǐng)求后，從數(shù)據(jù)庫中傳輸相應(yīng)的JSON返回到前臺(tái)進(jìn)行使用，從而完成微信支付。調(diào)用微信支付API代碼如下：

wx.requestPayment

（{

"timeStamp"： ""，

"nonceStr"： ""，

"package"： "prepay_id "，

"signType"： "RSA"，

"paySign"： "，

"success"：function（res）{}，

"fail"：function（res）{}，

"complete"：function（res）{}

}）

4 平臺(tái)的詳細(xì)介紹

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

4.1 AR尋家功能模塊

AR模塊是飾家平臺(tái)的一個(gè)重要功能。該功能主要基于AR技術(shù)與三維建模技術(shù)進(jìn)行開發(fā)，將商品詳細(xì)參數(shù)通過建模的形式進(jìn)行構(gòu)建，并將構(gòu)建好的商品通過AR技術(shù)呈現(xiàn)在用戶面前。該功能為平臺(tái)的主要購(gòu)物功能，對(duì)所有用戶開放，效果圖如圖3所示。

用戶可以根據(jù)個(gè)人需求，對(duì)家居和房屋進(jìn)行條件選擇，挑選出最適合自己的家居商品。配合飾家平臺(tái)所帶的攝像頭功能，對(duì)家居進(jìn)行位置擺放的測(cè)試，查看家居是否適合擺放于此，實(shí)現(xiàn)增強(qiáng)現(xiàn)實(shí)購(gòu)物。同時(shí)，用戶可以將擺放好的位置，方便用戶后期修改和查看。

4.2 個(gè)人中心模塊

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

4.3 私人訂制模塊

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

4.4 商品推送模塊

以智能化手機(jī)為代表的智能移動(dòng)設(shè)備已經(jīng)成為用戶滿足絕大多數(shù)基本需求的第一設(shè)備，其所加載的軟件也在進(jìn)入“沉浸式”[4]。 為了向用戶提供更多沉浸式體驗(yàn)，提高用戶的購(gòu)物體驗(yàn)。平臺(tái)推送過程中采用了基于內(nèi)容進(jìn)行分析的協(xié)同過濾算法，通過算法對(duì)用戶的瀏覽產(chǎn)品等習(xí)慣進(jìn)行分析，如：瀏覽產(chǎn)品的時(shí)間、搜索內(nèi)容、瀏覽產(chǎn)品的次數(shù)等，進(jìn)而為用戶推薦最佳優(yōu)質(zhì)商品。

5 結(jié)束語

增強(qiáng)現(xiàn)實(shí)技術(shù)應(yīng)用于網(wǎng)絡(luò)購(gòu)物，能夠提高網(wǎng)絡(luò)購(gòu)物的服務(wù)質(zhì)量，創(chuàng)造更大的經(jīng)濟(jì)效應(yīng)[5]。本平臺(tái)結(jié)合增強(qiáng)現(xiàn)實(shí)技術(shù)與3D建模技術(shù)，極大程度還原了商品呈現(xiàn)在家中的真實(shí)效果，給予用戶不一樣的購(gòu)物感官體驗(yàn)，開創(chuàng)全新的購(gòu)物方式。

參考文獻(xiàn)：

[1] 朱淼良，姚遠(yuǎn)，蔣云良.增強(qiáng)現(xiàn)實(shí)綜述[J].中國(guó)圖象圖形學(xué)報(bào)，2004，9（7）：767-774.

[2] 周忠，周頤，肖江劍.虛擬現(xiàn)實(shí)增強(qiáng)技術(shù)綜述[J].中國(guó)科學(xué)：信息科學(xué)，2015，45（2）：157-180.

[3] 趙沁平.移動(dòng)電商個(gè)性化推薦對(duì)消費(fèi)者購(gòu)買醫(yī)院影響分析[J].商業(yè)經(jīng)濟(jì)研究，2018（6）：54-57.

[4] 王燦.移動(dòng)信息聚合平臺(tái)研究[J].中國(guó)出版，2016（24）：22-25.

[5] 趙浩天.基于多因素模型的增強(qiáng)現(xiàn)實(shí)技術(shù)應(yīng)用于網(wǎng)絡(luò)購(gòu)物的經(jīng)濟(jì)效益評(píng)估[J].河南科技，2019（19）：24-26.

【通聯(lián)編輯：謝媛媛】

收稿日期：2021-12-08

基金項(xiàng)目：廣東省大學(xué)生創(chuàng)新訓(xùn)練計(jì)劃項(xiàng)目國(guó)家級(jí)項(xiàng)目——基于OCR文字識(shí)別和深度學(xué)習(xí)的錯(cuò)題識(shí)別趣味解答與推薦學(xué)習(xí)一體化應(yīng)用（項(xiàng)目編號(hào)：S202013902008）

作者簡(jiǎn)介：張圣銘（2001—），男，廣東惠州人，本科在讀，主要研究方向?yàn)閃eb前端開發(fā);陳潤(rùn)（1985—），男，廣東雷州人，講師，碩士，主要研究方向?yàn)榫W(wǎng)絡(luò)安全;萬神蔭（1999—），男，湖南岳陽人，本科在讀，主要研究方向?yàn)閃eb前端開發(fā);周景豪（1999—），男，廣東廣州人，本科在讀，主要研究方向?yàn)閖ava后臺(tái)開發(fā);陳康東（2000—），男，湖南岳陽人，本科在讀，主要研究方向?yàn)槿斯ぶ悄芘c大數(shù)據(jù)算法。