專利名稱：通過網(wǎng)頁利用蒙板選取商品部件的方法
技術(shù)領(lǐng)域：
本發(fā)明涉及圖像識別技術(shù)領(lǐng)域及3D技術(shù)領(lǐng)域，特別涉及一種通過網(wǎng)頁利用蒙板選取商品的三維模型中的部件的方法。
背景技術(shù)：
傳統(tǒng)的電子商務(wù)通過采購或者自主設(shè)計商品，批量生產(chǎn)并通過互聯(lián)網(wǎng)平臺銷售給用戶。隨著生活水平的提高，用戶對個性化定制的商品需求越來越多。其中最典型的例子是可以將自己的照片或者圖片印刷定制的T恤衫。在傳統(tǒng)電子商務(wù)平臺下，這種需求很難得到滿足，但是，隨著電子商務(wù)的發(fā)展使這種需求成為可能。在當(dāng)前的互聯(lián)網(wǎng)的電子商務(wù)實踐中，已經(jīng)存在多種在線商品定制方案。例如，www.kadang.com網(wǎng)站所采用的在線商品定制方案可以允許用戶在線定制包括T恤,茶杯,手機殼等商品。但其在線定制功能僅允許用戶提供定制素材,而無法在購買前看到所定制的商品，尤其是它僅僅提供了商品的圖片，因此也無法從多個角度查看定制效果.’■.1dx.com.cn網(wǎng)站是一家以運動鞋為主的在線運動鞋定制網(wǎng)站，其所采用的在線商品定制方案可以允許用戶定制一雙鞋的各個部件的面料，并且提供了 3D顯示功能，用戶可以在收到鞋之前從多角度看到商品的最終效果。但是，它并沒有采用真正的3D技術(shù)，而是實現(xiàn)從多個角度將各種鞋面材料拍照，通過圖片拼裝的方式進行展示。這種方案的問題在于首先它需要大量的前期拍照工作，其次它的適用范圍較窄，例如服裝，家具等商品就很難實現(xiàn)。并且，用戶僅能對選定的鞋型自由選擇材質(zhì)和面料，不能滿足用戶更高的個性化需求。因此，需要可以根據(jù)用戶需要在線選擇商品的不同的部件進行自由拼裝的在線商品定制。然而，如何通過網(wǎng)頁準(zhǔn)確地選擇商品的不同部件是首先需要解決的問題。

發(fā)明內(nèi)容

為解決上述問題，本發(fā)明提供一種通過網(wǎng)頁利用蒙板選取商品部件的方法，用戶可根據(jù)需要選擇不同的部件，從而使得用戶可以對商品的某些部件進行單獨選擇，實現(xiàn)商品組合的靈活性。為了達到上述目的，本發(fā)明提供一種通過網(wǎng)頁利用蒙板選取商品部件的方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，所述方法包括:根據(jù)商品模型的特點，分解出商品的多個可選取部件并為每個可選取部件分配一個用于在服務(wù)器中標(biāo)識該可選取部件的部件號；對商品模型的多個可選取部件進行分色渲染得到多個渲染結(jié)果圖片；將每個渲染結(jié)果圖片轉(zhuǎn)化成二維數(shù)組保存在一個蒙板文件中；當(dāng)通過將鼠標(biāo)定位在網(wǎng)頁中商品模型的可選取部件上選擇可選取部件時，分析鼠標(biāo)的位置數(shù)據(jù)；通過查詢與所述鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的保存在所述蒙板文件中二維數(shù)組的數(shù)據(jù)獲得鼠標(biāo)處的可選取部件的部件號。優(yōu)選地，所述對商品模型多個可選取部件進行分色渲染包括:為多個可選取部件分別分配不同的純色；根據(jù)每個可選取部件所分配到的純色，對每個可選取部件進行渲染得到一個渲染結(jié)果圖片。優(yōu)選地，所述二維數(shù)組中的每一個數(shù)據(jù)對應(yīng)渲染結(jié)果圖片上的一個點，其中每一個點對應(yīng)該點上的可選取部件的部件號。優(yōu)選地，預(yù)先將網(wǎng)頁中的鼠標(biāo)的位置數(shù)據(jù)與保存在所述蒙板文件中的二維數(shù)組的數(shù)據(jù)對應(yīng)，所述鼠標(biāo)的位置數(shù)據(jù)通過基于網(wǎng)頁的Javascript代碼獲得。優(yōu)選地，所述方法還包括:為每個可選取組件生成一個透明蒙板文件；根據(jù)鼠標(biāo)的位置數(shù)據(jù)選擇相對應(yīng)的透明蒙板文件；通過將該透明蒙板文件覆蓋在鼠標(biāo)所選擇的可選取部件上，使該可選取部件被高亮。優(yōu)選地，所述透明蒙板文件的覆蓋通過基于網(wǎng)頁的Javascript代碼實現(xiàn)。優(yōu)選地，所述透明蒙板文件為支持透明背景的png，gif, bmp格式圖片文件。優(yōu)選地，所述透明蒙板文件包括與所述可選取部件對應(yīng)的所需要高亮顯示的區(qū)域，并且該區(qū)域的大小和形狀與對應(yīng)的可選取部件的形狀相同。優(yōu)選地，所述透明蒙板文件的所需要高亮顯示的整個區(qū)域為不透明的，而其余區(qū)域為透明的。優(yōu)選地，所述透明蒙板文件的所需要高亮顯示的區(qū)域的邊緣為不透明的，而其余區(qū)域為透明的。為達到上述目的，本發(fā)明還提供了一種通過網(wǎng)頁在線拼裝定制方法，能夠通過網(wǎng)頁選擇不同的部件進行自由拼裝，使得能夠定制出滿足客戶個性化需求的商品。所述通過網(wǎng)頁在線拼裝定制方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，以定制成虛擬商品，所述方法包括:根據(jù)定制商品三維模型，分解出商品的可定制部分以及可定制部分的可定制部件；對這些可定制部件和商品分別進行3D建模得到可定制部件和商品的3D模型并將對應(yīng)的3D建模文件保存在服務(wù)器中；通過網(wǎng)頁利用蒙板選取商品模型的可定制部分，并選擇所述可定制部分的可定制部件；服務(wù)器根據(jù)所選擇的可定部分的可定制部件對商品模型進行渲染并保存所述渲染的數(shù)據(jù)；在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖。優(yōu)選地，當(dāng)鼠標(biāo)劃過可定制部件時，可定制部件被高亮。優(yōu)選地，通過三維建模工具對可定制部件進行建模。優(yōu)選地,通過Javascript技術(shù)在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖。優(yōu)選地，所述效果圖是具有所述可定制部件的商品模型的八個不同角度的八張圖片。優(yōu)選地，在頁面操作時，通過鼠標(biāo)滾輪或者點擊屏幕特定區(qū)域輪流顯示所述八張圖片以獲得三維展示的效果。優(yōu)選地，所述方法包括通過網(wǎng)頁設(shè)置可定制部件的屬性。優(yōu)選地，所述屬性為材質(zhì)、形狀、顏色或圖案中的至少一種。本發(fā)明的有益效果是:1、通過網(wǎng)頁利用蒙板選取商品部件的方法，用戶可根據(jù)需要選擇不同的部件，從而使得用戶可以對商品的某些部件進行單獨選擇，實現(xiàn)商品組合的靈活性，并且利用蒙板技術(shù)還能實現(xiàn)在網(wǎng)頁上高亮顯示選取不規(guī)則區(qū)域的效果。
2、通過網(wǎng)頁在線拼裝定制方法，用戶可根據(jù)需要選擇不同的部件進行的自由拼裝，能夠最大程度地滿足用戶的個性化定制的需求。3、通過Javascript技術(shù)在網(wǎng)頁中顯示渲染得到的定制商品的效果圖，為用戶提供交互式的所見即所得的定制服務(wù)。


通過說明書附圖以及隨后與說明書附圖一起用于說明本發(fā)明某些原理的具體實施方式
，本發(fā)明所具有的其它特征和優(yōu)點將變得清楚或得以更為具體地闡明。圖1示出了本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的流程圖；圖2a_2c示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第一實施例選擇的鞋子的部件的三個不同角度的視圖；圖3a_3c示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法選擇的床的部件的三個不同角度的視圖；圖4a_4c示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法選擇的眼鏡的部件的三個不同角度的視圖；圖5示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的鞋子的部件的視圖；圖6示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的床的部件的視圖；圖7示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的眼鏡的部件的視圖；圖8示出了本發(fā)明的通過網(wǎng)頁在線拼裝定制方法的流程圖；圖9示出了根據(jù)本發(fā)明的通過網(wǎng)頁在線拼裝定制方法定制的鞋子3D的示意圖。應(yīng)當(dāng)了解，說明書附圖并不一定按比例地顯示本發(fā)明的具體結(jié)構(gòu)，并且在說明書附圖中用于說明本發(fā)明某些原理的圖示性特征也會采取略微簡化的畫法。本文所公開的本發(fā)明的具體設(shè)計特征包括例如具體尺寸、方向、位置和外形將部件地由具體所要應(yīng)用和使用的環(huán)境來確定。在說明書附圖的多幅附圖中，相同的附圖標(biāo)記表示本發(fā)明的相同或等同的部件。
具體實施例方式在下面的描述中闡述了很多具體細(xì)節(jié)以便于充分理解本發(fā)明。但是本發(fā)明能夠以很多不同于在此描述的其它方式來實施，本領(lǐng)域技術(shù)人員可以在不違背本發(fā)明內(nèi)涵的情況下做類似推廣，因此本發(fā)明不受下面公開的具體實施例的限制。請參閱圖1所示，圖1示出了本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的流程圖。本發(fā)明提供了一種通過網(wǎng)頁利用蒙板選取商品部件的方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，所述方法包括:步驟101、根據(jù)商品模型的特點，分解出商品的多個可選取部件并為每個可選取部件分配一個用于在服務(wù)器中標(biāo)識該可選取部件的部件號；步驟102、對商品模型的多個可選取部件進行分色渲染得到多個渲染結(jié)果圖片；所述對商品模型多個可選取部件進行分色渲染包括:首先為多個可選取部件分別分配不同的純色；然后根據(jù)每個可選取部件所分配到的純色，對每個可選取部件進行渲染得到一個渲染結(jié)果圖片。步驟103、將每個渲染結(jié)果圖片轉(zhuǎn)化成二維數(shù)組保存在一個蒙板文件中；所述二維數(shù)組中的每一個數(shù)據(jù)對應(yīng)渲染結(jié)果圖片上的一個點，其中每一個點對應(yīng)該點上的可選取部件的部件號。其中，所述蒙板文件保存在服務(wù)器中，并且可由網(wǎng)頁通過javascript代碼獲得。步驟104、當(dāng)通過將鼠標(biāo)定位在網(wǎng)頁中商品模型的可選取部件上選擇可選取部件時，分析鼠標(biāo)的位置數(shù)據(jù)；所述鼠標(biāo)的位置數(shù)據(jù)的獲取可通過基于網(wǎng)頁的Javascript代碼中實現(xiàn)，并且，預(yù)先將網(wǎng)頁中的鼠標(biāo)的位置數(shù)據(jù)與保存在所述蒙板文件中的二維數(shù)組的數(shù)據(jù)對應(yīng)。步驟105、通過查詢與所述鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的保存在所述蒙板文件中二維數(shù)組的數(shù)據(jù)獲得鼠標(biāo)處的可選取部件的部件號。通過該部件號，可以確定鼠標(biāo)所在位置下的可選取部件以便于之后的高亮顯示和通過渲染引擎對該部件的渲染。在另一實施例中，所述方法還包括:為每個可選取組件生成一個透明蒙板文件；根據(jù)鼠標(biāo)的位置數(shù)據(jù)選擇相對應(yīng)的透明蒙板文件；通過將該透明蒙板文件覆蓋在鼠標(biāo)所選擇的可選取部件上，使該可選取部件被高亮。因此，當(dāng)用戶的鼠標(biāo)在商品模型上劃過時，通過對鼠標(biāo)位置的分析顯示不同的蒙板，達到了分別標(biāo)示的效果。其中，所述透明蒙板文件為支持透明背景的png，gif, bmp格式圖片文件，但本發(fā)明不限于此，還可以為任何合適格式的圖片文件；所述蒙板文件包括與所述可選取部件對應(yīng)的所需要高亮顯示的區(qū)域，所述透明蒙板文件的所需要高亮顯示的整個區(qū)域為不透明的，而其余區(qū)域為透明的。所述蒙板文件的覆蓋通過基于網(wǎng)頁的Javascript代碼實現(xiàn)。在另一實施例中，所述透明蒙板文件的所需要高亮顯示的區(qū)域的邊緣為不透明的，而其余區(qū)域為透明的。下面僅以鞋為例對本發(fā)明的具體實施例進行描述。圖2a_2c示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法選擇的鞋子的部件的三個不同角度的視圖。通過參考圖2a_2c具體描述選擇鞋子的部件的過程。根據(jù)鞋子的特點，分析出鞋子可具有7個可選取部件，包括鞋底部件、鞋跟部件、鞋面部件、鞋后跟部件、鞋幫部件、鞋帶部件和鞋口部件并為每個部件分配一個用于在服務(wù)器中標(biāo)識該可選取部件的部件號。分別為鞋底部件、鞋跟部件、鞋面部件、鞋后跟部件、鞋幫部件、鞋帶部件和鞋口部件分配七種不同的顏色例如，紅色、橙色、黃色、綠色、黑色、青色、紫色，然后根據(jù)每個可選取部件所分配到的純色對該可選取部件進行渲染得到一個渲染結(jié)果圖片，將每個渲染結(jié)果圖片轉(zhuǎn)化成二維數(shù)組保存在一個蒙板文件中。但本實施例不限于此，也可采用其他的顏色對鞋子200的各個可選取部件進行渲染。同時，為鞋子的7個可選取部件分別生成對應(yīng)的7個透明蒙板文件；其中，每個蒙板文件包括與該可選取部件對應(yīng)的所需要高亮顯示的區(qū)域，并且每個透明蒙板文件的所需要高亮顯示的區(qū)域的大小和形狀與對應(yīng)的商品模型的可選取部件的形狀相同；每個透明蒙板文件的所需要高亮顯示的整個區(qū)域為不透明的，而其余區(qū)域為透明的。通過Javascript技術(shù)在網(wǎng)頁中顯示商品和這些可選取部件的模型。當(dāng)用戶希望選擇鞋幫部件時，將鼠標(biāo)移至鞋幫部件。通過基于網(wǎng)頁的Javascript代碼獲得鼠標(biāo)的位置數(shù)據(jù)查詢出蒙板文件中的與鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的二位數(shù)組中的數(shù)據(jù)，從而得到與二位數(shù)組的數(shù)據(jù)相對應(yīng)的點上的鞋幫部件的部件號，從而實現(xiàn)了通過網(wǎng)頁對服務(wù)器中的鞋幫部件的選擇，同時，通過基于網(wǎng)頁的Javascript代碼將與鞋幫部件的部件號對應(yīng)的透明蒙板文件覆蓋在鞋幫部件上。該透明蒙板文件的不透明部分就是整個鞋幫部件形狀，并且該透明蒙板文件的不透明部分正好覆蓋在整個鞋幫部件上，因此，實現(xiàn)了通過網(wǎng)頁對服務(wù)器中的鞋幫部件的選擇并高亮顯示鞋幫部件。以此類推，當(dāng)鼠標(biāo)劃過鞋子的不同部件時，可顯示不同形狀但顏色統(tǒng)一的蒙板，從而達到分別標(biāo)示的效果。但本發(fā)明不限于此，本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法可應(yīng)用于選擇各種商品的部件，例如，服裝、鞋子、家具等。圖3a_3c例示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法選擇的床的部件的三個不同角度的視圖；圖4a_4c例示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法選擇的眼鏡的部件的三個不同角度的視圖，它們的具體實現(xiàn)方法如上所述，在此不再詳述。圖5示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的鞋子的部件的視圖。與圖2a_2c所示的第一實施例相比，圖5所示的第二實施例的不同之處在于，為鞋子的7個可選取部件分別生成對應(yīng)的7個透明蒙板文件；每個蒙板文件包括與該可選取部件對應(yīng)的所需要高亮顯示的區(qū)域，并且每個透明蒙板文件的所需要高亮顯示的區(qū)域的大小和形狀與對應(yīng)的商品模型的可選取部件的形狀相同，其中，所述透明蒙板文件的所需要高亮顯示的區(qū)域的邊緣為不透明的，而其余區(qū)域為透明的。通過Javascript技術(shù)在網(wǎng)頁中顯示商品和這些可選取部件的模型。當(dāng)用戶希望選擇鞋幫部件時，將鼠標(biāo)移至鞋幫部件。通過基于網(wǎng)頁的Javascript代碼獲得鼠標(biāo)的位置數(shù)據(jù)查詢出蒙板文件中的與鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的二位數(shù)組中的數(shù)據(jù)，從而得到與二位數(shù)組的數(shù)據(jù)相對應(yīng)的點上的鞋幫部件的部件號，從而實現(xiàn)了通過網(wǎng)頁對服務(wù)器中的鞋幫部件的選擇，同時，通過基于網(wǎng)頁的Javascript代碼將與鞋幫部件的部件號對應(yīng)的透明蒙板文件覆蓋在鞋幫部件上。該透明蒙板文件的不透明部分就是鞋幫部件形狀的邊緣，并且該透明蒙板文件的不透明部分正好覆蓋在鞋幫部件的邊緣上，因此，實現(xiàn)了通過網(wǎng)頁對服務(wù)器中的鞋幫部件的選擇并高亮顯示鞋幫部件的邊緣。但本發(fā)明不限于此，本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法可應(yīng)用于選擇各種商品的部件，例如，服裝、鞋子、家具等。圖6例示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的床的部件的視圖；圖7例示出了根據(jù)本發(fā)明的通過網(wǎng)頁利用蒙板選取商品部件的方法的第二實施例選擇的眼鏡的部件的視圖；它們的具體實現(xiàn)方法如上所述，在此不再詳述。請參閱圖8所示，圖8示出了本發(fā)明的通過網(wǎng)頁在線拼裝定制方法的流程圖。本發(fā)明提供了一種通過網(wǎng)頁在線拼裝定制方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，以定制成商品，所述方法包括:步驟801、根據(jù)定制商品三維模型，分解出商品的可定制部分以及可定制部分的可定制部件。在以鞋作為示例的實施例中，所述可定制部件可以為鞋跟部件、鞋帶部件、鞋面部件等，所述可定制部件可以為各種樣式的鞋跟、鞋帶以及鞋上的裝飾件等，但是本發(fā)明的范圍不限于此。步驟802、對這些可定制部件和商品分別進行3D建模得到它們的3D模型并將它們的3D建模文件保存在服務(wù)器中。在本實施例中，通過三維建模工具對所述可定制部件和商品進行3D建模生成所述可定制部件和商品3D模型(例如，以鞋子為例，通過三維建模工具對鞋子進行3D建模，得到鞋子的3D模型)，并將這些3D模型輸出為OBJ格式的3D建模文件，所述3D建模文件包含模型的所有空間幾何數(shù)據(jù)，這些幾何數(shù)據(jù)包含了點和線構(gòu)成的幾萬至幾百萬個三角形。優(yōu)選地，所述三維建模工具為3DSMAX或MAYA軟件，但本發(fā)明不限于此，還可以是其它任何適用的三維建模工具。步驟803、通過網(wǎng)頁利用蒙板選取商品模型的可定制部分，并選擇所述可定制部分的可定制部件。優(yōu)選地，當(dāng)鼠標(biāo)在可定制部分上時，可定制部分被高亮。為了選擇商品的可定制部分，需要預(yù)先通過蒙板技術(shù)對所述商品3D模型的不同部分進行分色渲染，將渲染得到的圖片轉(zhuǎn)化為二維數(shù)組并將其保存在一個蒙板文件中，其中，所述二維數(shù)組中的每一個數(shù)據(jù)對應(yīng)渲染得到的圖片上的一個點，每一個點對應(yīng)該點上的可定制部分的編號。同時，為每個可定制部分生成一個透明蒙板文件。接著，分析鼠標(biāo)的位置數(shù)據(jù)，通過與所述鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的預(yù)先保存的二維數(shù)組的數(shù)據(jù)獲得鼠標(biāo)處的可定制部分的編號，并通過基于網(wǎng)頁的Javascript代碼將與可定制部分的編號對應(yīng)的透明蒙板文件覆蓋在該可定制部分上，使該可定制部分被高亮。其中，所述鼠標(biāo)的位置數(shù)據(jù)的獲取和蒙板文件的覆蓋可通過基于網(wǎng)頁的Javascript代碼中實現(xiàn)。步驟804、服務(wù)器根據(jù)所選擇的可定部分的可定制部件對商品模型進行渲染并保存所述渲染的數(shù)據(jù)，其中在渲染時需要指定可定制部件的模型的相對位置，可采用現(xiàn)有的渲染技術(shù)對商品進行渲染。`在本實施例中，渲染的過程包括:首先將渲染請求通過網(wǎng)絡(luò)發(fā)送給渲染引擎 ’然后，渲染引擎根據(jù)渲染請求讀取并載入所需要渲染的可定制部件的模型文件，同時還會載入可定制部件的模型的相對位置等；在載入完畢之后，引擎首先設(shè)定一個相機位置，然后對可定制部件的三維模型中的每個點分析其光線反射后產(chǎn)生的圖像，最終組合成一個渲染結(jié)果圖。步驟805、在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖。在本實施例中，可通過Javascript技術(shù)在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖，所述效果圖是所述可定制部件的商品模型的八個不同角度的八張圖片，用戶在頁面操作時可以通過鼠標(biāo)滾輪或者點擊屏幕特定區(qū)域輪流顯示這八張圖片，達到三維展示的效果。但本發(fā)明不限于此，可采用更多或更少角度的圖片來展示三維效果。優(yōu)選地，還可通過網(wǎng)頁設(shè)置可定制部件的屬性。在本實施例中，所述屬性為部件材質(zhì)、形狀、顏色或圖案等等。例如，當(dāng)用戶選擇模型的一個可定制部分并且選擇了對應(yīng)的可定制部件(例如，裝飾件)之后，可以選擇該裝飾件的材質(zhì)、形狀等。有關(guān)所述屬性的數(shù)據(jù)存放在單獨的圖形文件中，在渲染時會根據(jù)渲染命令讀取并處理。下面僅以鞋為例對本發(fā)明的具體實施例進行描述。圖9為根據(jù)本發(fā)明的通過網(wǎng)頁在線拼裝定制方法定制的鞋子3D的示意圖。通過參考圖9具體描述定制鞋子的過程。根據(jù)鞋子的特點，分析出鞋子可具有7個可定制部分901、902、903、904、905、906和907，以及其對應(yīng)的可定制部件分別為各種類型的鞋底、鞋跟、鞋面、鞋后跟、鞋幫、鞋帶和鞋口。然后采用3DSMAX軟件對鞋子900和這些可定制部件進行3D建模生成OBJ格式的3D建模文件，并將所述3D建模文件保存在服務(wù)器中。通過可通過Javascript技術(shù)在網(wǎng)頁中顯示商品和這些可定制部件的模型以及各個可定制部件的可選擇的屬性。用戶通過鼠標(biāo)在網(wǎng)頁中選取鞋子模型的可定制部分901，選擇喜歡類型的鞋底模型，例如選擇高跟鞋鞋底，并選擇鞋底模型的屬性，例如，顏色為黑色，材質(zhì)為牛筋。服務(wù)器收到用戶的選擇后，根據(jù)用戶選擇的鞋底模型及其屬性和該鞋底模型的相對位置，對產(chǎn)鞋子模型進行渲染，并保存渲染的數(shù)據(jù)。然后，通過Javascript技術(shù)在網(wǎng)頁中顯示具有黑色的牛筋材質(zhì)的高跟鞋鞋底的鞋子模型。接著，用戶在網(wǎng)頁中選取鞋子模型的可定制部分902，選擇喜歡類型的高跟鞋跟模型，例如選擇圓錐形高跟鞋鞋跟，并選擇鞋跟模型的屬性，例如，顏色為黑色，材質(zhì)為耐磨塑料。服務(wù)器收到用戶的選擇后，根據(jù)用戶選擇的鞋跟模型及其屬性和該鞋跟模型的相對位置，對上述具有黑色的耐磨塑料的高跟鞋鞋跟的鞋子模型進行渲染，并保存渲染的數(shù)據(jù)。然后，通過Javascript技術(shù)在網(wǎng)頁中顯示具有黑色的牛筋材質(zhì)的高跟鞋鞋底和黑色的耐磨塑料的鞋跟的鞋子模型。類似地，依次完成可定制部分903、904、905、906、907的選取，以及對應(yīng)的可定制
部件及其屬性的選擇，最后得到如圖9所示的高跟鞋，從而實現(xiàn)了鞋子的全部個性化定制。用戶在頁面操作時，可通過鼠標(biāo)滾輪輪流顯示定制的高跟鞋的八個角度的八張圖，以觀看定制的鞋子的三維展示的效果。上述實施例是用于例示性說明本發(fā)明的原理及其功效，但是本發(fā)明并不限于上述實施方式。本領(lǐng)域的技術(shù)人員均可在不違背本發(fā)明的精神及范疇下，在權(quán)利要求保護范圍內(nèi)，對上述實施例進行修改。因此本發(fā)明的保護范圍，應(yīng)如本發(fā)明的權(quán)利要求書覆蓋。
權(quán)利要求
1.一種通過網(wǎng)頁利用蒙板選取商品部件的方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，其特征在于，所述方法包括: 根據(jù)商品模型的特點，分解出商品的多個可選取部件并為每個可選取部件分配一個用于在服務(wù)器中標(biāo)識該可選取部件的部件號； 對商品模型的多個可選取部件進行分色渲染得到多個渲染結(jié)果圖片； 將每個渲染結(jié)果圖片轉(zhuǎn)化成二維數(shù)組保存在一個蒙板文件中； 當(dāng)通過將鼠標(biāo)定位在網(wǎng)頁中商品模型的可選取部件上選擇可選取部件時，分析鼠標(biāo)的位置數(shù)據(jù)； 通過查詢與所述鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的保存在所述蒙板文件中二維數(shù)組的數(shù)據(jù)獲得鼠標(biāo)處的可選取部件的部件號。
2.根據(jù)權(quán)利要求1所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述對商品模型多個可選取部件進行分色渲染包括: 為多個可選取部件分別分配不同的純色； 根據(jù)每個可選取部件所分配到的純色，對每個可選取部件進行渲染得到一個渲染結(jié)果圖片。
3.根據(jù)權(quán)利要求2所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述二維數(shù)組中的每一個數(shù)據(jù)對應(yīng)渲染結(jié)果圖片上的一個點，其中每一個點對應(yīng)該點上的可選取部件的部件號。
4.根據(jù)權(quán)利要 求2所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，預(yù)先將網(wǎng)頁中的鼠標(biāo)的位置數(shù)據(jù)與保存在所述蒙板文件中的二維數(shù)組的數(shù)據(jù)對應(yīng)，所述鼠標(biāo)的位置數(shù)據(jù)通過基于網(wǎng)頁的Javascript代碼獲得。
5.根據(jù)權(quán)利要求1所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述方法還包括: 為每個可選取組件生成一個透明蒙板文件； 根據(jù)鼠標(biāo)的位置數(shù)據(jù)選擇相對應(yīng)的透明蒙板文件； 通過將該透明蒙板文件覆蓋在鼠標(biāo)所選擇的可選取部件上，使該可選取部件被高亮。
6.根據(jù)權(quán)利要求5所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述透明蒙板文件的覆蓋通過基于網(wǎng)頁的Javascript代碼實現(xiàn)。
7.根據(jù)權(quán)利要求5所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述透明蒙板文件為支持透明背景的png，gif, bmp格式圖片文件。
8.根據(jù)權(quán)利要求7所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述透明蒙板文件包括與所述可選取部件對應(yīng)的所需要高亮顯示的區(qū)域，并且該區(qū)域的大小和形狀與對應(yīng)的可選取部件的形狀相同。
9.根據(jù)權(quán)利要求8所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述透明蒙板文件的所需要高亮顯示的整個區(qū)域為不透明的，而其余區(qū)域為透明的。
10.根據(jù)權(quán)利要求8所述的通過網(wǎng)頁利用蒙板選取商品部件的方法，其特征在于，所述透明蒙板文件的所需要高亮顯示的區(qū)域的邊緣為不透明的，而其余區(qū)域為透明的。
11.一種通過網(wǎng)頁在線拼裝定制方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，以定制成虛擬商品，其特征在于，所述方法包括:根據(jù)定制商品的三維模型，分解出商品的可定制部分以及可定制部分的可定制部件；對這些可定制部件和商品分別進行3D建模得到可定制部件和商品的3D模型并將對應(yīng)的3D建模文件保存在服務(wù)器中； 通過網(wǎng)頁利用蒙板選取商品模型的可定制部分，并選擇所述可定制部分的可定制部件； 服務(wù)器根據(jù)所選擇的可定部分的可定制部件對商品模型進行渲染并保存所述渲染的數(shù)據(jù)； 在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖。
12.根據(jù)權(quán)利要求11所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，當(dāng)鼠標(biāo)劃過可定制部件時，可定制部件被高亮。
13.根據(jù)權(quán)利要求11所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，通過三維建模工具對可定制部件進行3D建模。
14.根據(jù)權(quán)利要求11所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，所述方法還包括:通過Javascript技術(shù)在網(wǎng)頁中顯示具有所述可定制部件的商品模型的效果圖。
15.根據(jù)權(quán)利要求11所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，所述效果圖是所述具有所述可定制部件的商品模型的八個不同角度的八張圖片。
16.根據(jù)權(quán)利要求15所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，在頁面操作時，通過鼠標(biāo)滾輪或者點擊屏幕特定區(qū)域輪流顯示所述八張圖片以獲得三維展示的效果。
17.根據(jù)權(quán)利要求11所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，所述方法包括通過網(wǎng)頁設(shè)置可定制部件的屬性。
18.根據(jù)權(quán)利要求17所述的通過網(wǎng)頁在線拼裝定制方法，其特征在于，所述屬性為材質(zhì)、形狀、顏色或圖案中的至少一種。
全文摘要
一種通過網(wǎng)頁利用蒙板選取商品部件的方法，由用戶通過網(wǎng)頁對服務(wù)器中的商品的三維模型中的部件進行選擇，所述方法包括根據(jù)商品模型的特點，分解出商品的多個可選取部件并為每個可選取部件分配一個用于在服務(wù)器中標(biāo)識該可選取部件的部件號；對商品模型的多個可選取部件進行分色渲染得到多個渲染結(jié)果圖片；將每個渲染結(jié)果圖片轉(zhuǎn)化成二維數(shù)組保存在一個蒙板文件中；當(dāng)通過將鼠標(biāo)定位在網(wǎng)頁中商品模型的可選取部件上選擇可選取部件時，分析鼠標(biāo)的位置數(shù)據(jù)；通過查詢與所述鼠標(biāo)的位置數(shù)據(jù)相對應(yīng)的保存在所述蒙板文件中二維數(shù)組的數(shù)據(jù)獲得鼠標(biāo)處的可選取部件的部件號。此外，本發(fā)明還提供了一種通過網(wǎng)頁在線拼裝定制方法。
文檔編號G06Q30/00GK103150656SQ201310113048
公開日2013年6月12日 申請日期2013年4月2日 優(yōu)先權(quán)日2013年4月2日
發(fā)明者畢勝, 李勇 申請人:樂淘奇品網(wǎng)絡(luò)技術(shù)(北京)有限公司