《網站設計》實驗教學內容與方法改革探討

楊猛　李曄　劉帥　趙思敏　何臨風　韓月　楊剛

摘 要：WebGL是一種在網頁上用戶交互展現三維立體場景的網頁編程技術，是“網站設計”課程實驗教學環節中重點教學內容之一。WebGL技術具有專業性強、編碼復雜、難于掌握等特點，因此，它也是實驗教學方法改革中的難點之一。本文以功能完善的個性化產品定制平臺為例，重點研究了實驗教學過程中WebGL的關鍵功能的技術實現方法并且闡述了其良好的發展前景，便于教師深入淺出地講解WebGL技術，并使學生能夠更加容易地、有效地、方便地理解并掌握WebGL的實驗方法與關鍵技術。

關鍵詞：WebGL技術；個性化；產品定制；發展動態

中圖分類號：TP391.9 文獻標識碼：A

Abstract：WebGL is a kind of web programming techniques for users to present 3D scenes interactively.It is one of the key teaching contents in an experiment teaching of Web Design course.The WebGL technique is strong speciality，high complexity of coding and more difficulty to master.Therefore it is one of the difficulties in the reform of experimental teaching method.This paper takes a fully functional personalized product customization platform as an example，focuses on the realization method of WebGL's essential technology and its good prospects for development during experimental teaching，easy for teachers to explain the technique of WebGL deeply in a simple way，students can understand and master the experimental method and the key technique of WebGL more easily，effectively and expediently.

Keywords：WebGL technique；personality；product customization；development trend

1 引言（Introduction）

WebGL是當下越發興起的一種網頁編程技術，它把JavaScript和OpenGL ES 2.0結合在一起，為HTML5 Canvas提供硬件3D加速渲染，使得在瀏覽器里能夠更加流暢的展示3D場景和模型。因此，WebGL是當前“網站設計”課程教學中的重要教學內容之一。同時，WebGL技術具有專業性強、編碼復雜、難于掌握等特點，因此，它也是實驗教學過程中的難點之一。

本文以構建功能完善的個性化產品定制平臺以及總結其在國內外的發展現狀為例，深入淺出地介紹實驗教學過程中該平臺的關鍵技術的實現方法與過程以及發展動態，便于教師講解WebGL技術，并使學生能夠更加容易地、有效地理解并掌握WebGL的實驗方法與關鍵技術。

2 國內外研究動態（The domestic and foreign

research tendency）

2.1 國內現狀

網頁DIY產品定制平臺是指在網站交易的基礎之上對客戶提供多樣化的產品設計種類以及產品細節選擇定制的創意交互網站。在網站上，人們自己充當設計師選擇想要的產品種類，再對選擇的產品進行DIY設計，專屬打造自己的獨一無二的個性化產品[1]。

目前，DIY產品行業在我國國內的競爭力已不容小覷，越來越多的人們的產品需求更加趨于個性化。DIY個性定制產品行業的趨勢如此看來是不可阻擋的，很有可能會繼續延伸到生活的各個方面，從而掀起一股個性定制的浪潮。

但是現在，我國很多的DIY產品企業都是處于小作坊經營階段，無論是淘寶網店還是門店都是分散經營，產品單一，數量繁雜，沒有統一的歸類和宣傳，無論是生產、經營環節，都缺乏規模化的經營與管理思路，這就一定程度上對客戶在DIY產品定制方面上的興趣形成了一種無形的削減，導致長期以來，這個行業都沒有被重視。

2.2 國外現狀

和國內相比，國外的DIY產品定制行業發展的要好得多，現在國外已經有多家網站在線提供產品設計定制服務，客戶可以登錄網站，自行設計自己想要的個性化產品，打造自己的獨一無二[2]。這樣不僅能滿足人們對于個性化產品的需求，此外，相比國內單一的在商店購買已經打造好的個性產品，網站在線設計可以讓人們根據自己的喜好來對產品進行配色、貼圖等功能。在這一方面，廣為人知的例子當屬NIKE品牌推出的NIKEID服務了，NIKEID服務就是NIKE推出的在線定制球鞋服務，客戶可以根據自己的喜好，個性化打造自己的專屬戰靴。網站上有上百種鞋款供人們選擇，人們還可以對其進行材料顏色的選擇修改以及添加一些個性化的符號等，使客戶可以通過自己的行動來向他人呈現出自己的想法與個性。

不足的是，對于NIKE的NIKEID服務，雖然相比于國內有著更加人性化的設計，更加迎合人們自己設計的消費心理，然而它們的產品種類卻趨于單一化，只是有NIKE鞋類的定制，限制了人們心中對于其他種類產品定制的想法，也進一步說明DIY個性產品定制還需要進一步的完善與發展以滿足人們各種想法的實現。endprint

2.3 發展動態

綜合國內外的發展現狀可以總結，在個性化產品定制中，要滿足用戶的個性化需求，就必須與用戶進行有效、實時的溝通，讓其參與到產品的整個生產周期中。而網絡上搭建的虛擬現實交互系統就能夠將虛擬產品模型實時展現，并且用戶能實時瀏覽模型，對產品的虛擬模型進行可交互操作，生成讓用戶滿意的產品模型[3]。如今，虛擬現實技術已發展的相當成熟。利用虛擬現實開發工具與規范編程語言相結合，就能讓用戶在客戶端對產品三維虛擬模型進行實時交互控制，生成與客戶需求相符的虛擬產品模型。

在我國，虛擬現實技術在個性化產品定制方面的研究已經取得了一些成果。有王先逵教授的“面向虛擬產品開發的機床動態設計系統研究”[4]，李伯虎院士的“復雜產品虛擬樣機工程的研究與初步實踐”的研究[5]，楊宇航教授“基于Transom Jack仿真支持平臺的維修仿真系統”[6]的研究等。這些研究都在其領域里取得了成果。

除了虛擬現實技術外，要實現本項目研究的DIY產品定制平臺，3D打印技術也是有著重要作用的，在此平臺下，客戶產品的需求數量一般只是少數的幾件，甚至僅為一件，若按傳統的加工制造的方式可能無法實現。例如，需要定制一件個性化的塑料產品，是不可能為了這一件產品來進行模具的設計與制造的，因為其中的成本是難于承受的，也勢必造成社會生產力的極大浪費。而3D打印技術的出現，就順理成章地解決了個性化產品實現層面的問題。

與傳統的加工制造方式不同，3D打印技術是一依托于信息技術、精密機械以及材料科學等多學科發展起來的尖端技術，其學術名稱為快速成型技術（RP：Rapid Prototyping Manufacturing），誕生于20世紀80年代。3D打印的基本原理是：分層制造、逐層疊加[7]。它能大大提高制造業的效率和靈活性，通過3D打印技術，人們可以直接制造出自己想要的各種產品，設計成本和周期都大大減少。與此同時，產品的制造將因此變得更加靈活，定制的、個性化的產品將替代現在千篇一律的流水線成品，成為未來的主流。今后購買的產品將根據客戶自身的具體信息進行定制，部分產品會通過3D打印制造并直接送到客戶手中。

3 總體設計思路與內容（General design idea and

contents）

個性化產品定制平臺主要是針對于兩個功能角度進行網站搭建：第一個是從系統建模的角度，利用3DMax和Photoshop等軟件進行實物建模，在網頁上實現DIY的360度3D可視化，即在用戶進行了一系列的設計之后可以直觀的看到物品呈現的真實效果，最大盡到“做實物”的樂趣，盡量呈現出逼真的視覺效果；二是用戶在進行自主設計時的相對自由度，即在已有物品模板的情況下，用戶能夠按照自主的想法選擇貼圖的樣式和位置，甚至用素材庫里的一些圖形改變布局等等。針對以上的兩個核心功能模塊，其研究的主要內容包括：

（1）系統建模和網站搭建：總結生活中常用的一些物品，利用3DMax和Photoshop進行建模如（馬克杯、鴨舌帽、抱枕、T-shirt、手機殼、拼圖、雨傘、明信片、氣球、布袋、球類、撲克牌、卡片優盤、口罩、襪子），實現每一種物品360度查看均能得到逼真的視覺感受，同時建立網頁本身的素材庫，諸如一些貼圖和圖形，基于HTML、DIV+CSS等技術，實現網站整體的構建。

（2）模塊功能與基本構架：平臺的基本功能架構如圖1所示，用戶根據需要點擊相應的產品名稱進入對應的用戶DIY產品界面。用戶在進行自主設計時需要有良好的交互性，能讓設計更加的輕松自如，基于WebGL等技術，從用戶體驗和頁面功能設置及布局上進行研究，使用戶使用簡單的操作即可以將自己設置的圖形完美貼合在模板上，輕松實現自己的想法。個性化產品定制平臺主要功能是讓用戶在網站上能夠對3D模型進行實時的處理，因此，其應用到的技術包括3D建模、html建站以及網頁中的3D模型的加載及處理。對于3D建模和html建站，應用Dreamweaver、3DMax等軟件即可實現，而作為近年來新興的WebGL技術，由于現在的參考資料較少，所以在實現3D模型在網頁中的加載并且對其進行控制處理的問題上遇到了不少的瓶頸。針對在實現平臺功能的過程中遇到的相關WebGL技術，下文對其進行了詳細的技術剖析。

customization platform

4 實驗開發環境建設（Experiment development

environment construction）

基于WebGL的個性化產品定制平臺的開發與運行的環境：開發環境為普通的PC機，開發軟件為Dreamweaver、3DMax、Photoshop等，開發語言為HTML、JavaScript、WebGL等。運行環境為Windows 95/98/2000/XP+IE5.5，Windows media player以上版本。

5 實驗方法與關鍵技術剖析（Experimental methods

and key techniques）

個性化產品定制平臺主要功能是讓用戶在網站上能夠對3D模型進行實時的處理，因此，其應用到的技術包括3D建模、html建站，以及網頁中3D模型的加載及處理。對于3D建模和html建站，我們應用Dreamweaver、3DMax等軟件并對其深入學習即可實現，而作為近年來新興的WebGL技術，由于現在的參考資料較少，所以在實現3D模型在網頁中的加載處理功能上遇到了不少的瓶頸，因此針對于WebGL技術，做了以下關于網站關鍵功能實現的技術剖析。

為了實現能讓用戶實時查看并修改設計自己想要的產品，一方面需要將模型實時顯示在網頁上，讓用戶能夠360度的觀察這個模型，另一方面也需要給予用戶修改模型上內容的能力，例如用戶可自由調整紋理貼圖的樣式以及位置，甚至整個模型的底色等等，這些功能實現如算法1所示。endprint

算法1：載入一個3D模型并生成菜單可其上面的紋理信息。

（1）載入OBJ模型。

（2）加載紋理。

（3）紋理設置為實時更新。

（4）顯示OBJ模型。

（5）創建控制菜單。

（6）IF菜單中模型的編號不為現在顯示的模型編號，則將當前模型修改為不可見將編號對應模型修改為可見。

（7）IF菜單中RGB分量的值與當前顯示的模型的RGB分量值不同，則將當前模型的RGB修改為菜單中RGB的值。

（8）IF菜單中回環次數的值與當前顯示的模型的回環次數值不同，則將當前模型的回環次數修改為菜單中回環次數的值。

（9）IF菜單中回環方式對應的的值與當前顯示的模型的回環方式對應的值不同，則將當前模型的回環方式對應的修改為菜單中回環方式對應的值。

（10）IF菜單中紋理X、Y偏移量的值與當前顯示的模型的紋理X、Y偏移量的值不同，則將當前模型的紋理X、Y偏移量的值修改為菜單中紋理X、Y偏移量的值。

5.1 3D模型加載與使用功能的實現

3D模型的導入是最為重要的一個部分，WEBGL對現在許多市面上大多數3D模型格式都能支持，在這里我們選擇的是OBJ格式的模型，將由3DMAX等軟件制作出來的模型導入并顯示出來，我們才能實現后續的功能，程序相關代碼如下：

<！--加載OBJ文件讀取的JS文件-->

var loader=new THREE.OBJLoader（manager）；<！--創建-->

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）；

5.2 菜單管理功能的實現

菜單管理導航的內容有：模型編號選擇、紋理控制、部件選擇和部件皮膚選擇，其中紋理控制分為紋理重復的次數、紋理回環的方式、紋理在X軸上的偏移量，紋理在Y軸上的偏移量，紋理背景顏色的RGB分量選擇。程序相關代碼如下：

<！--加載菜單相關的JS文件-->

vargui=new dat.GUI（）；<！--創建-->

para={<！--所有選項初始值的設定-->

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，<！--初始狀態為勾選-->

B_02：true，

B_03：true，

}；

var h；

h=gui.add（para，"newShading"，["01"，"02"，"03"]）.name（"杯子編號"）.onChange（render）；<！--創建一個可以下拉選擇的模型選擇菜單-->

h=gui.addFolder（"Material control"）；

<！--創建一個可以打開顯示更多選項的材質控制菜單-->

h.add（para，"repeat"，1，5）.name（"紋理重復"）；

<！--創建一個控制紋理重復次數的選項，取值范圍1到5-->

h.add（para，"wrap"，1，3）.name（"紋理環繞"）.step（1）；

<！--創建一個控制紋理回環方式的選項，取值范圍1到3，步距為1-->

h.add（para，"offsetX"，-1.0，1.0）.name（"紋理X偏

移"）.step（0.1）；

<！--創建一個控制紋理X軸偏移量的選項，取值范圍-1到1，步距0.1-->

h.add（para，"offsetY"，-1.0，1.0）.name（"紋理Y偏

移"）.step（0.1）；

<！--創建一個控制紋理Y軸偏移量的選項，取值范圍-1到1，步距0.1-->

h.add（para，"b"，0，1）.name（"藍"）.step（0.1）；

<！--創建一個控制紋理背景顏色藍色分量的選項，取值范圍0到1，步距0.1-->

h.add（para，"g"，0，1）.name（"綠"）.step（0.1）；

<！--創建一個控制紋理背景顏色綠色分量的選項，取值范圍0到1，步距0.1-->

h.add（para，"r"，0，1）.name（"紅"）.step（0.1）；

<！--創建一個控制紋理背景顏色紅色分量的選項，取值范圍0到1，步距0.1-->

h=gui.addFolder（"model select"）；

<！--創建一個可以打開顯示更多選項的部件控制菜單-->

h.add（para，"B_01"）.name（"部件01"）.onChange（render）；

<！--創建一個可以勾選的部件選擇選項-->

h.add（para，"B_03"）.name（"部件02"）.onChange（render）；

<！--創建一個可以勾選的部件選擇選項-->

h=gui.add（para，"newSkin1"，["skin1"，"skin2"，"skin3"]）.name（"部件01Skin"）.onChange（render）；

<！--創建一個可以下拉選擇的部件皮膚選擇菜單-->

h=gui.add（para，"newSkin3"，["skin1"，"skin2"，"skin3"]）.name（"部件02Skin"）.onChange（render）

<！--/創建一個可以下拉選擇的部件皮膚選擇菜單-->

5.3 模型切換功能的實現

為了給用戶提供方便也提供更多的選擇，我們再一個界面中為用戶提供多種模型的選擇，所以菜單中第一項就是一個下拉菜單，可以選擇模型，并且切換的很快，實際上是一開始就加載了所有模型，只是每次只顯示其中一個。相關代碼如下：

loader.load（'obj/male02/beizi2.obj'，function（object）{

object.name="2"；

object.position.y=-100；

object.scale.x=object.scale.y=object.scale.z=4；

object.traverse（function （child） {

if （child instanceofTHREE.Mesh）{

child.material.map=texture1；

texture=texture1；

}

}）；

object.visible=false；

<！--在將模型添加進場景前將模型的可見屬性設置為不可見-->

scene.add（object）；

}，onProgress，onError）；

if（model=="01"）{

if（mesh1.visible==false）

mesh1.visible=true；

<！--當用戶選擇01時，將另外兩個模型的可見屬性修改為不可見，將第一個模型修改為可見-->

mesh2.visible=false；

mesh3.visible=false；

mesh=mesh1；

}

if（model=="02"）{

mesh1.visible=false；

mesh2.visible=true；

mesh3.visible=false；

<！--當用戶選擇02時，將另外兩個模型的可見屬性修改為不可見，將第二個模型修改為可見-->

mesh=mesh2；

}

if（model=="03"）{

mesh1.visible=false；

mesh2.visible=false；

mesh3.visible=true；

<！--當用戶選擇03時，將另外兩個模型的可見屬性修改為不可見，將第三個模型修改為可見-->

mesh=mesh3；

}

5.4 紋理控制功能模塊的實現

5.4.1 紋理的加載功能的實現

在3D模型加載并顯示之后，我們還需要給其附上紋理才能達到真實好看的效果，首先就需要與3D模型加載類似的對紋理進行加載，程序相關代碼如下：

var texture1=new THREE.Texture（）；<！--創建-->

var loader=newTHREE.ImageLoader（manager）；<！--創建-->

loader.load（'textures/01.jpg'，function （image） {<！--讀取目標文件的路徑-->

texture1.image=image；<！--加載-->

texture1.needsUpdate=true；<！--開啟紋理實時更新-->

}）；

5.4.2 紋理控制各項功能的實現

用戶可以對貼在模型上的紋理進行調整，以達到自己想要的效果，重復次數即這張紋理在整個模型上重復的次數，數字越大每張圖片的大小越小；回環方式即紋理在模型上的回環方式共有三種，第一種為正常的不斷重復，第二種為將圖片邊緣的像素拉長，第三種為鏡像重復；X和Y軸的偏移量則是直觀的拖動后就會向相應的方向移動，以便用戶將圖片調整到模型上自己想要的位置；RGB三種分量即用戶可以自己設置整個模型的背景（基礎）顏色，尤其在不想要任何圖片只想要純色時，可以自由的調整，只需拉動相應顏色的條即可，程序相關代碼如下：endprint

function change（texture，color）{

if（texture ！=null）{<！--在紋理不為空的情況下才能進行各項屬性的修改-->

texture.repeat.x=texture.repeat.y=para.repeat；<！--將菜單中的重復次數賦給紋理-->

texture.offset.x=para.offsetX；<！--將菜單的X軸偏移量賦給紋理-->

texture.offset.y=para.offsetY；<！--將菜單的Y軸偏移量賦給紋理-->

if（para.wrap==1）{

texture.wrapS=texture.wrapT=THREE.RepeatWrapping；

<！--修改紋理的回環方式為第一種-->

}else if（para.wrap==2）{

texture.wrapS=texture.wrapT=THREE.ClampToEdgeWrapping；

<！--修改紋理的回環方式為第二種-->

}else if（para.wrap==3）{

texture.wrapS=texture.wrapT=THREE.MirroredRepeatWrapping；

<！--修改紋理的回環方式為第三種-->

}

texture.needsUpdate=true；<！--紋理實時更新-->

}

color.b=para.b；<！--將菜單中藍色分量賦給紋理-->

color.g=para.g；<！--將菜單中綠色分量賦給紋理-->

color.r=para.r；<！--將菜單中紅色分量賦給紋理-->

}

6 實驗結果及討論（Experiment result and

discussions）

基于WebGL的個性化產品定制平臺的開發與運行的環境：開發環境為普通的PC機，開發軟件為Dreamweaver、3ds Max、Photoshop等，開發語言為HTML、JavaScript、WebGL等。運行環境為Windows 95/98/2000/XP+IE5.5、Windows media player以上版本。平臺的主頁如圖2所示，用戶可以通過主頁中的各個按鈕實現到各個功能模塊的切換。

平臺的產品展示模塊如圖3所示，用戶可以瀏覽平臺支持定制的產品種類。

product customization

平臺的產品定制入口界面如圖4所示，用戶根據需要點擊相應的產品名稱進入對應的用戶DIY產品界面。

平臺的帽子定制頁面如圖5所示，以帽子產品定制為例，帽子產品模型如圖6（a）所示，DIY編輯窗口如圖6（b）所示，用戶可以根據對不同帽子編號的選擇來定制不同樣式的帽子，帽檐為部件1，帽蓋為部件2，用戶可以分別對部件1和部件2的紋理貼圖進行選擇，并且對貼圖的三色偏移量和紋理坐標進行設置。此外，用戶還可以勾選不同的部件來對其進行單獨的設置。

7 結論（Conclusion）

本文以線上個性化產品定制平臺的開發為例，結合《網站設計》實驗教學過程中的內容與方法實踐研究，深入淺出地對WebGL在當下新興領域DIY產品定制網站開發中的關鍵技術進行詳細地剖析，使學生能夠更加容易地、有效地理解并掌握WebGL的關鍵技術及其發展動態；通過技術與藝術相結合，在網絡經營等方面也有著巨大的潛力和應用價值。

參考文獻（References）

[1] 彭飛，等.基于Web的個性化產品定制系統的體系結構研究[J].機械設計，2002（3）：3-5.

[2] 祁國寧，顧新建.大批量定制—21世紀制造業的主流生產模式[J].國際學術動態，2006（6）：28-33.

[3] 安琳.面向動態需求的產品定制系統構建方法研究[D].陜西：西北工業大學，2005.

[4] 魏海燕，等.面向虛擬產品開發的機床動態設計系統研究[J].機床與液壓，2003（4）：97-98.

[5] 李伯虎，等.復雜產品虛擬樣機工程的研究與初步實踐[J].系統仿真學報，2002，14（3）：336-340.

[6] 楊宇航，蘇曼迪，李雅峰.基于Transom Jack仿真支持平臺的維修仿真系統[J].計算機工程與設計，2006，27（7）：1265-1268.

[7] 趙占西.產品造型設計材料與工藝[M].北京：機械工業出版社，2012.

作者簡介：

楊 猛（1982-），男，博士，副教授.研究領域：計算機圖形學，虛擬現實，增強現實，WebGL計算機動畫.

李 曄（1995-），女，本科生.研究領域：計算機圖形學.

劉 帥（1994-），男，本科生.研究領域：計算機圖形學.

趙思敏（1995-），女，本科生.研究領域：計算機圖形學.

何臨風（1995-），男，本科生.研究領域：計算機圖形學.

韓 月（1994-），女，本科生.研究領域：計算機圖形學.

楊 剛（1977-），男，博士，副教授.研究領域：計算機圖形學，虛擬現實.endprint