洪英漢　黃彬超

摘要：本文介紹了產(chǎn)品3D展示的優(yōu)點，分析了搭建網(wǎng)站所要應(yīng)用的技術(shù)，以及如何利用jQuery技術(shù)實現(xiàn)產(chǎn)品的3D展示，為商家降低開發(fā)成本。產(chǎn)品的3D展示為網(wǎng)站本身增添了不少特色，而且也更凸顯出產(chǎn)品獨有的特點，為客戶提供全方位的產(chǎn)品信息，從而對提高產(chǎn)品的銷售率，也為未來電子商務(wù)的發(fā)展有著重要的意義，前景是非?？捎^的。

關(guān)鍵詞：3D展示； 網(wǎng)站； jQuery；

中圖分類號：TP311 文獻標(biāo)識碼：A 文章編號：1009-3044（2015）28-0144-02

1 搭建產(chǎn)品3D展示網(wǎng)站的意義

1.1研究意義

隨著技術(shù)的進步，網(wǎng)絡(luò)應(yīng)用的發(fā)展，企業(yè)把自家產(chǎn)品放置網(wǎng)上，通過互聯(lián)網(wǎng)強大的功能，企業(yè)可以方便地做到和顧客及時的溝通，且由原來的“一對多”轉(zhuǎn)向“一對一”，針對性更加有效。目前，我們從購物網(wǎng)站所了解看到的產(chǎn)品展示，都是簡單地用圖片列出，雖然圖片拍攝的角度不同，能夠基本的體現(xiàn)出產(chǎn)品的外貌特性，但是還是缺乏靈活、清晰、炫酷的展示效果，產(chǎn)品有形而無神，難免會缺乏吸引力，以至很難抓住客戶的心，所以我們就需要有一個很好的平臺，相對完美的體現(xiàn)產(chǎn)品的特性，使產(chǎn)品形神合一，留住客戶的心。

1.2 產(chǎn)品3D展示的優(yōu)勢

產(chǎn)品3D展示的提出就是為了解決產(chǎn)品不生動的問題，制造一個良好而又靈活清晰的平臺，360°展現(xiàn)自己獨一無二的產(chǎn)品，為客戶提供多元的全方位的產(chǎn)品信息，沖擊客戶的眼球。產(chǎn)品3D展示能夠有效地幫助客戶了解產(chǎn)品的整體到細節(jié)、從外到內(nèi)多維的商品詳細信息，這對從事網(wǎng)絡(luò)營銷行業(yè)的企業(yè)來說，是一個非常不錯的平臺，更是需要通過產(chǎn)品3D展示來提高銷售訂單，增加業(yè)績。因此研究如何呈現(xiàn)產(chǎn)品的3D展示，對電子商務(wù)的發(fā)展尤為重要。

1 產(chǎn)品3D展示網(wǎng)站的搭建

2.1 核心技術(shù)

2.1.1 jQuery框架

JQuery 是一個 JavaScript 輕量級的函數(shù)庫，能夠極大地簡化、快速地編寫Javascript代碼，以下特性功能：

1）HTML 元素快速選取，便捷操作，改變頁面內(nèi)容；

2）CSS 屬性操作自如，修改頁面外觀；

3）HTML 事件（events）函數(shù)，響應(yīng)用戶的交互操作；

4）Javascript 為頁面添加特效、動畫效果；

5）HTML DOM 快速遍歷、操作修改；

6）AJAX異步加載技術(shù)，能夠無刷新頁面，獲取服務(wù)器信息。

2.1.3 MVC三層架構(gòu)

MVC是一種軟件設(shè)計典范，一般是指MVC框架。程序代碼可以通過使用模型（Model）、View（視圖）、Controller（控制器）分離的方法組織。

模型（Model）應(yīng)用程序核心部分，處理任務(wù)最多，負責(zé)存取數(shù)據(jù)，而且能為多個視圖提供相應(yīng)的數(shù)據(jù)，減少代碼的重復(fù)書寫，簡潔高效。

視圖（View）顯示部分，根據(jù)模型提供的數(shù)據(jù)，合理地將數(shù)據(jù)呈現(xiàn)為用戶能夠清晰地看到的界面。

控制器（Controller）處理交互部分，通過接受用戶的請求，然后決定調(diào)用哪一個模型去處理用戶的請求，之后選擇哪個視圖來顯示模型提供的數(shù)據(jù)。

2.2 服務(wù)器搭建方案

目前最流行應(yīng)用最廣的Web服務(wù)器是Apache服務(wù)器，它的優(yōu)勢在于可以運行在廣泛使用的不同的計算機平臺上，它的安全、可靠、快速、免費、穩(wěn)定等特點備受人們青睞。MySQL是一個小巧的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，而PHP是類似ASP的執(zhí)行在服務(wù)器端的腳本語言。它們都適合用在搭建網(wǎng)站，再加上Apache+PHP+MySQL除了是開源項目，而且可以免費獲取，支持不同的操作系統(tǒng)，可移植性好，因此，它們的組合是最佳的搭配方案。

目前在Windows下搭建PHP服務(wù)器有很多軟件提供支持，有幾款PHP服務(wù)器比較流行，如：XAMPP、WampServer、PHPNow、Vertrigo Server 、PHPStudy、AppServ、EasyPHP等。通過安裝以上軟件，可以快速搭建PHP服務(wù)器。

2.3 產(chǎn)品3D圖片生成流程

制作產(chǎn)品3D展示所應(yīng)用的圖片需要有3D自動成像系統(tǒng)，即能夠360度拍攝產(chǎn)品的系統(tǒng)，還應(yīng)當(dāng)配備一臺電腦和一臺照相機。3D自動成像系統(tǒng)包括了3D自動成像軟件和3D拍攝硬件（攝影棚、轉(zhuǎn)盤），需要向運營商購買。照相機需要配合3D自動成像軟件，目前該軟件只支持佳能（Canon）和尼康（Nikon）相機的某些型號。電腦配置最好推薦操作系統(tǒng)Windows XP、Windows 7，CPU頻率2.0GHz ，內(nèi)存2G ，硬盤160G。

以下簡單的描述3D圖片拍攝過程：

1）安裝3D自動成像軟件，如電腦已經(jīng)安裝好則跳過該步驟；

2）將轉(zhuǎn)盤接通電源、并通過數(shù)據(jù)線連接到電腦，如未檢測到轉(zhuǎn)盤，需要安裝和系統(tǒng)匹配的轉(zhuǎn)盤驅(qū)動；

3）設(shè)置相機模式調(diào)到“M”檔，自動關(guān)閉電源，選擇“關(guān)”，啟動實時取景功能，然后通過數(shù)據(jù)線連接到電腦；

4）打開軟件（第一次使用需要導(dǎo)入授權(quán)文件），在軟件中選擇“照相機”功能模塊，該模塊中選擇相機類型（如果相機有閃光燈，需要點擊“關(guān)閉實時取景”功能），啟動照相機。按照自己的意愿選擇拍攝的參數(shù)，如拍攝的張數(shù)、感光度、光圈等。然后點擊“啟動”；

5）拍攝完成后，會自動彈出保存窗口，點擊“確定”即可。

2.4 設(shè)計思路

產(chǎn)品3D展示要活靈活現(xiàn)的在Web頁面上顯示，需要結(jié)合HTML、CSS、Javascript的靈活應(yīng)用。需要以什么樣的方式去實現(xiàn)它，途徑多種多樣。以下介紹設(shè)計的大致思路：

1）需要在HTML中插入3D展示所需要的圖片，圖片由照相機拍攝產(chǎn)品所得，張數(shù)由拍攝時設(shè)定。由于是3D展示，所以需要影藏其他圖片只剩默認的第一張圖或用戶選定的圖；

2）為了能使圖片隨鼠標(biāo)拖動而切換，所以應(yīng)當(dāng)綁定鼠標(biāo)事件；

3） 能夠按照用戶的意愿操作切換圖片，那么當(dāng)用戶在圖片的上方開始點擊鼠標(biāo)拖動時，記錄鼠標(biāo)的坐標(biāo)，用戶移動時需要判斷用戶是左移動還是右移動，可根據(jù)用戶移動后的坐標(biāo)和剛開始拖動時的坐標(biāo)比較得知；

4）得到用戶的移動方向后，根據(jù)方向切換圖片顯示，記錄新的鼠標(biāo)坐標(biāo)，繼續(xù)判斷用戶的移動方向，然后切換圖片，直到用戶停止在指定區(qū)域上拖動產(chǎn)品圖片；

5）當(dāng)用戶停止拖動時，需要馬上停止圖片切換功能，防止鼠標(biāo)不拖動圖片時，移動事件繼續(xù)使圖片切換。

2.5 程序?qū)崿F(xiàn)

在HTML中產(chǎn)品展示布局特點，其中有一個總?cè)萜鳎萜鲀?nèi)有包含圖片的容器，還有一個遮罩層，遮罩層是用來擋住圖片，比圖片所在的層要高，避免鼠標(biāo)真的拖動圖片，而是在遮罩層上方拖動。圖片都是按照產(chǎn)品3D展示的特點，有規(guī)律的排序。

給遮罩層綁定事件，記錄鼠標(biāo)剛開始拖拽時的坐標(biāo)，代碼如下：

$overlayer.bind（'mousedown touchstart'， function（e） {

if （e.type == "touchstart"） {

options.currPos = window.event.touches[0].pageX；

} else {

options.currPos = e.pageX；

}

options.clicked = true；

return false；

}）；

給遮罩層綁定事件，當(dāng)鼠標(biāo)拖動時，判斷拖動的距離是不是大于width_step，如果大于再判斷鼠標(biāo)是左移動還是右移動，得知移動方向后切換圖片，記錄新的鼠標(biāo)坐標(biāo)，以便為下一次鼠標(biāo)移動作對比。

當(dāng)鼠標(biāo)停止按下恢復(fù)原樣時，阻止圖片切換，為了讓鼠標(biāo)在遮罩層上方不拖動圖片移動時，遮罩層的鼠標(biāo)移動事件對圖片切換功能不起作用。代碼如下：

jQuery（document）.bind（'mouseup touchend'， function（） {

options.clicked = false；

}）；

頁面展示效果，當(dāng)鼠標(biāo)按下，然后向左拖動時，頁面產(chǎn)生的效果如下：

3 總結(jié)

本文提出基于產(chǎn)品3D展示網(wǎng)站的研究與實現(xiàn)是為了解決眾多商家把產(chǎn)品搬移到互聯(lián)網(wǎng)上而存在產(chǎn)品的外觀特點不夠詳細，不吸引客戶眼球等問題。不僅給網(wǎng)站增添了許多特色，更為客戶能夠全方位了解產(chǎn)品的特點提供可能，這就能夠吸引更多的客戶來了解或者購買商家的產(chǎn)品，從而提高銷售量，使之未來普及應(yīng)用可行性高。在研究開發(fā)過程驗證了方案可行性的同時也存在著不足，即圖片數(shù)量過多，加載速度慢。雖然本文方案存在著不足之處，但提高購物網(wǎng)站的趣味性有著良好的應(yīng)用價值。

參考文獻：

[1] 潘凱華，劉中華.專著.PHP從入門到精通（第二版）[M].清華大學(xué)出版社，2010.4-7.

[2] Jonathan Chaffer， Karl Swedberg.專著. jQuery基礎(chǔ)教程（第四版）[M]. 人民郵電出版社，2013.1-2.

[3] 趙鶴芹.期刊.設(shè)計動態(tài)網(wǎng)站的最佳方案：Apache+PHP+MySQL[J]. 計算機工程與設(shè)計，2007，28（4）：933.

[4] 倪樂波，戚鵬，遇麗娜，王婧.期刊.Unity3d產(chǎn)品虛擬展示技術(shù)的研究與應(yīng)用[J].數(shù)字技術(shù)與應(yīng)用，2010，（09）：54.

[5] 韋寧.期刊. 基于ASP.NET的商品Cult3D展示[J]. 廣西大學(xué)梧州分校學(xué)報，2004，14（3）：61.

[6] 趙然，陳璟. 基于對象全景圖片的互動三維商品網(wǎng)絡(luò)展示[J]. 中國傳媒科技，2012，（24）：200.