本發(fā)明涉及網(wǎng)頁建立的技術(shù)領(lǐng)域，尤其涉及一基于WebGL的網(wǎng)頁建立及操作方法。

背景技術(shù)：

這么多年以來，網(wǎng)頁似乎都停留在2D的世界。2012年末開始到整個2013年，涌現(xiàn)出非常多采用CSS 3D變形和Parallax(視覺差，通過鼠標滑動讓網(wǎng)頁上不同層次的內(nèi)容以不同的速率位移而形成一種層次感)效果的網(wǎng)站，讓這個2D的網(wǎng)絡(luò)世界出現(xiàn)了豐富的層次和縱深感。

然而，2D的網(wǎng)頁僅能呈現(xiàn)平面的效果，而無法呈現(xiàn)立體效果3D場景和模型給用戶，如此將會降低用戶的體驗。因此，在網(wǎng)頁建立的相關(guān)設(shè)計仍有改善的空間。

技術(shù)實現(xiàn)要素：

本發(fā)明的主要目的在于提供一種基于WebGL的網(wǎng)頁建立及操作方法，以解決現(xiàn)有技術(shù)存在的無法呈現(xiàn)立體效果3D場景和模型給用戶的問題。

為解決上述問題，本發(fā)明實施例提供一種基于WebGL的網(wǎng)頁建立及操作方法，包括：基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件；產(chǎn)生多個物件屬性，分別配置給所述多個模型物件，其中所述物件屬性為可調(diào)整；產(chǎn)生多個第一選項圖標，其中所述多個第一選項圖標分別對應(yīng)所述模型物件；將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上；當所述多個第一選項圖標其中之一被選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。

其中，所述物件屬性包括模型編號、紋理的控制、部件的選擇和部件皮膚選擇。

其中，所述紋里的控制包括紋理重復(fù)的次數(shù)、紋理回環(huán)的方式、紋理在X軸上的偏移量、紋理在Y軸上的偏移量、紋理背景顏色的RGB分量選擇。

其中，所述基于WebGL的網(wǎng)頁建立及操作方法還包括：產(chǎn)生第二選項圖標，其中所述第二選項圖標其中之一對應(yīng)所述第一操作頁面，其余的所述多個第二選項圖標對應(yīng)網(wǎng)頁的多個第三操作頁面；將所述多個第二選項圖標顯示于網(wǎng)頁的第四操作頁面上；當所述多個第二選項圖標其中之一被操作選取時，切換至所述第一操作頁面或所述多個第三操作頁面的其中之一。

其中，所述多個第二選項圖包括模型DIY、模型展示、團隊介紹、聯(lián)系我們。

其中，當被選取的所述第二選項圖標為模型DIY時，切換至所述第一操作頁面。

其中，當被選取的所述第二選項圖標為模型展示時，切換至所述第四操作頁面，并顯示多個預(yù)定的模型。

其中，當被選取的所述第二選項圖標為團隊介紹時，切換至所述第四操作頁面，并顯示團隊的相關(guān)人員簡介。

其中，當被選取的所述第二選項圖標為聯(lián)系我們時，切換至所述第四操作頁面，并顯示姓名、電郵、電話號碼及信息的選項。

根據(jù)本發(fā)明的技術(shù)方案，通過基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件，分別多個物件屬性配置給所述多個模型物件，再產(chǎn)生多個第一選項圖標分別對應(yīng)所述模型物件，且將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上以及當所述多個第一選項圖標其中之一被選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。如此一來，戶可以選擇自己想要的模型物件，并且可調(diào)整模型物件在操作頁面上的位置，完全自己設(shè)計商品(模型物件)的紋理，以增加使用上的便利性及體驗感。

附圖說明

此處所說明的附圖用來提供對本發(fā)明的進一步理解，構(gòu)成本申請的一部分，本發(fā)明的示意性實施例及其說明用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的不當限定。在附圖中：

圖1是根據(jù)本發(fā)明實施例的基于WebGL的網(wǎng)頁建立及操作方法的流程圖；

圖2是根據(jù)本發(fā)明實施例的第一操作頁面的示意圖；

圖3是根據(jù)本發(fā)明實施例的第二操作頁面的示意圖；

圖4是根據(jù)本發(fā)明實施例的第二操作頁面的另一示意圖；

圖5是根據(jù)本發(fā)明實施例的基于WebGL的網(wǎng)頁建立及操作方法的另一流程圖；

圖6是根據(jù)本發(fā)明實施例的第四操作頁面的示意圖；

圖7是是根據(jù)本發(fā)明實施例的第三操作頁面的示意圖；

圖8是是根據(jù)本發(fā)明實施例的第三操作頁面的另一示意圖；

圖9是是根據(jù)本發(fā)明實施例的第三操作頁面的另一示意圖。

具體實施方式

本發(fā)明的主要思想在于，基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件，分別多個物件屬性配置給所述多個模型物件，再產(chǎn)生多個第一選項圖標分別對應(yīng)所述模型物件，且將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上以及當所述多個第一選項圖標其中之一被選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。如此一來，戶可以選擇自己想要的模型物件，并且可調(diào)整模型物件在操作頁面上的位置，完全自己設(shè)計商品(模型物件)的紋理，以增加使用上的便利性及體驗感。

為使本發(fā)明的目的、技術(shù)方案和優(yōu)點更加清楚，以下結(jié)合附圖及具體實施例，對本發(fā)明做進一步地詳細說明。

根據(jù)本發(fā)明的實施例，提供了一種基于WebGL的網(wǎng)頁建立及操作方法。

圖1是根據(jù)本發(fā)明實施例的基于WebGL的網(wǎng)頁建立及操作方法的流程圖。

在步驟S102中，基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件。其中，WebGL是一種3D繪圖標準，它允許把JavaScript和OpenGL ES2.0結(jié)合在一起，這代表WebGL免去了開發(fā)網(wǎng)頁專用渲染插件的麻煩，開發(fā)人員可以借助系統(tǒng)顯卡來在瀏覽器里更流暢的展示3D場景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。

在本實施例中，模型物件例如為帽子、杯子等。也就是說，通過WebGL所產(chǎn)生的模型物件，可供用戶選擇并使用。并且，模型物件導(dǎo)入的代碼如下所示：

<script src＝"js/loaders/OBJLoader.js"></script>//加載OBJ文件讀取的JS文件

var loader＝new THREE.OBJLoader(manager)；//創(chuàng)建

loader.load('obj/male02/beizi1.obj',function(object){//讀取目標文件

object.name＝"1"；//將此模型命名為1

object.scale.x＝object.scale.y＝object.scale.z＝4；//模型放大4倍

object.position.y＝-100；//模型初始位置Y坐標為-100

object.traverse(function(child){//找到模型下的每一個組件

if(child instanceofTHREE.Mesh){//如果組件是一個Mesh child.material.map＝texture1；//給其附上紋理

}

})；

scene.add(object)；//將模型添加進場景中

},onProgress,onError)；

在步驟S104中，產(chǎn)生多個物件屬性，分別配置給所述多個模型物件，其中所述物件屬性為可調(diào)整。在本實施例中，所述物件屬性包括模型編號、紋理的控制、部件的選擇和部件皮膚選擇。進一步來說，所述紋里的控制還包括紋理重復(fù)的次數(shù)、紋理回環(huán)的方式、紋理在X軸上的偏移量、紋理在Y軸上的偏移量、紋理背景顏色的RGB分量選擇。而物件屬性的相關(guān)代碼如下所示：

<script src＝"js/dat.gui.min.js"></script>//加載菜單相關(guān)的JS文件

<vargui＝new dat.GUI()；//創(chuàng)建

para＝{//所有選項初始值的設(shè)定

repeat:1,

wrap:1,

offsetX:0,

offsetY:0,

b:1,

g:1,

r:1,

newShading:"01",

newSkin1:"skin1",

newSkin2:"skin1",

newSkin3:"skin1",

B_01:true,//初始狀態(tài)為勾選

B_02:true,

B_03:true,

}；

var h；

h＝gui.add(para,"newShading",["01","02","03"]).name("杯子編號").onChange(render)；//創(chuàng)建一個可以下拉選擇的模型選擇菜單

h＝gui.addFolder("Material control")；//創(chuàng)建一個可以打開顯示更多選項的材質(zhì)控制菜單

h.add(para,"repeat",1,5).name("紋理重復(fù)")；//創(chuàng)建一個控制紋理重復(fù)次數(shù)的選項，取值范圍1到5

h.add(para,"wrap",1,3).name("紋理環(huán)繞").step(1)；//創(chuàng)建一個控制紋理回環(huán)方式的選項，取值范圍1到3，步距為1

h.add(para,"offsetX",-1.0,1.0).name("紋理X偏移").step(0.1)；//創(chuàng)建一個控制紋理X軸偏移量的選項，取值范圍-1到1，步距0.1

h.add(para,"offsetY",-1.0,1.0).name("紋理Y偏移").step(0.1)；//創(chuàng)建一個控制紋理Y軸偏移量的選項，取值范圍-1到1，步距0.1

h.add(para,"b",0,1).name("藍").step(0.1)；//創(chuàng)建一個控制紋理背景顏色藍色分量的選項，取值范圍0到1，步距0.1

h.add(para,"g",0,1).name("綠").step(0.1)；//創(chuàng)建一個控制紋理背景顏色綠色分量的選項，取值范圍0到1，步距0.1

h.add(para,"r",0,1).name("紅").step(0.1)；//創(chuàng)建一個控制紋理背景顏色紅色分量的選項，取值范圍0到1，步距0.1

h＝gui.addFolder("model select")；//創(chuàng)建一個可以打開顯示更多選項的部件控制菜單

h.add(para,"B_01").name("部件01").onChange(render)；//創(chuàng)建一個可以勾選的部件選擇選項

h.add(para,"B_03").name("部件02").onChange(render)；//創(chuàng)建一個可以勾選的部件選擇選項

h＝gui.add(para,"newSkin1",["skin1","skin2","skin3"]).name("部件01Skin").onChange(render)；//創(chuàng)建一個可以下拉選擇的部件皮膚選擇菜單

h＝gui.add(para,"newSkin3",["skin1","skin2","skin3"]).name("部件02Skin").onChange(render)；//創(chuàng)建一個可以下拉選擇的部件皮膚選擇菜單

在步驟S106中，產(chǎn)生多個第一選項圖標，其中所述多個第一選項圖標分別對應(yīng)所述模型物件。其中，每一第一選項圖標與對應(yīng)的模型物件之間會具有連結(jié)關(guān)系。

在步驟S108中，將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上。也就是說，顯示于第一操作頁面上的第一選項圖標是用于供用戶選擇并可進行點選操作，如圖2所示。并且，圖2中僅示出了帽子與杯子的第一選項圖標，但本實施例不限于此，設(shè)計者亦可視其需求，自行增加其它數(shù)量的第一選項圖標，以供用戶有更多的選擇。

在步驟S110中，當所述多個第一選項圖標其中之一被操作選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。也就是說，當用戶于第一操作頁面上點選一個第一選項圖標時，則網(wǎng)頁會從第一操作頁面切換至第二操作頁面上，且第一選項圖標與對應(yīng)的模型物件之間具有連結(jié)關(guān)系，因此被選取的模型物件及及對應(yīng)的物件屬性會顯示于第二操作頁面上，如圖3或圖4所示所示。接著，用戶便可于第二操作網(wǎng)頁上，對模型物件進行定制，并對物件屬性進行調(diào)整，以調(diào)整到用戶自己想要的效果。

舉例來說，用戶可以對在模型物件上的紋理進行調(diào)整，以達到自己想要的效果，紋理的重復(fù)次數(shù)即這張紋理在整個模型物件上重復(fù)的次數(shù)，數(shù)字越大每張圖片的大小越??；紋理的回環(huán)方式即紋理在模型物件上的回環(huán)方式，共有三種，第一種為正常的不斷重復(fù)，第二種為將模型物件邊緣的像素拉長，第三種為鏡像重復(fù)；紋理在X軸和Y軸上的偏移量則是直觀的拖動后就會向相應(yīng)的方向移動，以便用戶將模型物件調(diào)整到自己想要的位置；紅(R)、綠(G)、藍(B)三種分量即用戶可以自己設(shè)置整個模型物件的背景(基礎(chǔ))顏色，尤其在只想要純色時，可以自由的調(diào)整，只需拉動相應(yīng)顏色的條即可。相關(guān)代碼如下：

function change(texture,color)

{

if(texture！＝null){//在紋理不為空的情況下才能進行各項屬性的修改

texture.repeat.x＝texture.repeat.y＝para.repeat；//將菜單中的重復(fù)次數(shù)賦給紋理

texture.offset.x＝para.offsetX；//將菜單的X軸偏移量賦給紋理

texture.offset.y＝para.offsetY；//將菜單的Y軸偏移量賦給紋理

if(para.wrap＝＝1)

{

texture.wrapS＝texture.wrapT＝THREE.RepeatWrapping；//修改紋理的回環(huán)方式為第一種

}else if(para.wrap＝＝2)

{

texture.wrapS＝texture.wrapT＝THREE.ClampToEdgeWrapping；//修改紋理的回環(huán)方式為第二種

}else if(para.wrap＝＝3)

{

texture.wrapS＝texture.wrapT＝THREE.MirroredRepeatWrapping；//修改紋理的回環(huán)方式為第三種

}

texture.needsUpdate＝true；//紋理實時更新

}

color.b＝para.b；//將菜單中藍色分量賦給紋理

color.g＝para.g；//將菜單中綠色分量賦給紋理

color.r＝para.r；//將菜單中紅色分量賦給紋理

}

如此一來，通過本實施例，用戶可以選擇自己想要的模型物件，并且可調(diào)整模型物件在操作頁面上的位置，完全自己設(shè)計商品(模型物件)的紋理，以增加使用上的便利性及體驗感。

圖5是根據(jù)本發(fā)明實施例的基于WebGL的網(wǎng)頁建立及操作方法的另一流程圖。

在步驟S502中，基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件。在步驟S504中，產(chǎn)生多個物件屬性，分別配置給所述多個模型物件，其中所述物件屬性為可調(diào)整。在步驟S506中，產(chǎn)生多個第一選項圖標，其中所述多個第一選項圖標分別對應(yīng)所述模型物件。在步驟S508中，將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上。

在步驟S510中，產(chǎn)生第二選項圖標，其中所述第二選項圖標其中之一對應(yīng)所述第一操作頁面，其余的所述多個第二選項圖標對應(yīng)網(wǎng)頁的多個第三操作頁面。其中，第二選項圖標其中之一與第一操作頁面之間會具有連結(jié)關(guān)系，而其余的每一第二選項圖標與對應(yīng)的第三操作頁面之間會具有連結(jié)關(guān)系。

在步驟S512中，將所述多個第二選項圖標顯示于網(wǎng)頁的第四操作頁面上。也就是說，顯示于第四操作頁面上的第二選項圖標是用于供用戶選擇并可進行點選操作，且例如作為網(wǎng)頁的首頁操作頁面。

在步驟S514中，當所述多個第二選項圖標其中之一被操作選取時，切換至所述第一操作頁面或所述多個第三操作頁面的其中之一。也就是說，用戶可以根據(jù)自己的需求，點選第二選項圖標中的一個，使得第四操作頁面切換至第一操作頁面或是第三操作頁面。

進一步來說，第四操作頁面所顯示的第二選項圖標包括模型DIY、模型展示、團隊介紹、聯(lián)系我們，如圖6所示。并且，圖6中僅示出了模型DIY、模型展示、團隊介紹、聯(lián)系我們的第二選項圖標，但本實施例不限于此，設(shè)計者亦可視其需求，自行增加其它數(shù)量的第二選項圖標，以供用戶有更多的選擇。

舉例來說，在一實施例中，當被選取的所述第二選項圖標為模型展示(即用戶點選顯示模型展示的第二選項圖標)時，切換至所述第四操作頁面，并顯示多個預(yù)定的模型，如圖7所示。接著，使用者便可于第四操作頁面中選取想要的模型，并進行相應(yīng)的操作。

在一實施例中，當被選取的所述第二選項圖標為團隊介紹時，切換至所述第四操作頁面，并顯示團隊的相關(guān)人員簡介，如圖8所示。在圖8中，相關(guān)人員簡介包括人員照片、人員姓名及負責項目(如主持人、網(wǎng)頁設(shè)計等)。也就是說，用戶可以在第四操作頁面中，看到設(shè)計網(wǎng)頁的相關(guān)人員簡介，并進行了解。

在一實施例中，當被選取的所述第二選項圖標為聯(lián)系我們時，切換至所述第四操作頁面，并顯示姓名、電郵、電話號碼及信息的選項，如圖9所示。也就是說，用戶可以在第四頁面中，留下自己的姓名、電郵、電話號碼及信息，以便于反饋相關(guān)的意見設(shè)計人員，以便進行相關(guān)的調(diào)整及回復(fù)。

在一實施例中，當被選取的所述第二選項圖標為模型DIY時，切換至所述第一操作頁面。接著，進入步驟S516，當所述多個第一選項圖標其中之一被操作選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。而步驟S516的相關(guān)操作，可參考圖1的實施例的步驟S110說明，故在此不再贅述。

綜上所述，根據(jù)本發(fā)明的技術(shù)方案，通過基于WebGL，導(dǎo)入3D模型，以產(chǎn)生多個模型物件，分別多個物件屬性配置給所述多個模型物件，再產(chǎn)生多個第一選項圖標分別對應(yīng)所述模型物件，且將所述多個第一選項圖標顯示于網(wǎng)頁的第一操作頁面上以及當所述多個第一選項圖標其中之一被選取時，被選取的所述模型物件及其對應(yīng)的物件屬性顯示于網(wǎng)頁的第二操作頁面上。如此一來，戶可以選擇自己想要的模型物件，并且可調(diào)整模型物件在操作頁面上的位置，完全自己設(shè)計商品(模型物件)的紋理，以增加使用上的便利性及體驗感。

以上所述僅為本發(fā)明的實施例而已，并不用于限制本發(fā)明，對于本領(lǐng)域的技術(shù)人員來說，本發(fā)明可以有各種更改和變化。凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進等，均應(yīng)包含在本發(fā)明的權(quán)利要求范圍之內(nèi)。