楊猛　李曄　劉帥　趙思敏　何臨風(fēng)　韓月　楊剛

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

關(guān)鍵詞：WebGL技術(shù)；個性化；產(chǎn)品定制；發(fā)展動態(tài)

中圖分類號：TP391.9 文獻(xiàn)標(biāo)識碼：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是當(dāng)下越發(fā)興起的一種網(wǎng)頁編程技術(shù)，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，為HTML5 Canvas提供硬件3D加速渲染，使得在瀏覽器里能夠更加流暢的展示3D場景和模型。因此，WebGL是當(dāng)前“網(wǎng)站設(shè)計”課程教學(xué)中的重要教學(xué)內(nèi)容之一。同時，WebGL技術(shù)具有專業(yè)性強、編碼復(fù)雜、難于掌握等特點，因此，它也是實驗教學(xué)過程中的難點之一。

本文以構(gòu)建功能完善的個性化產(chǎn)品定制平臺以及總結(jié)其在國內(nèi)外的發(fā)展現(xiàn)狀為例，深入淺出地介紹實驗教學(xué)過程中該平臺的關(guān)鍵技術(shù)的實現(xiàn)方法與過程以及發(fā)展動態(tài)，便于教師講解WebGL技術(shù)，并使學(xué)生能夠更加容易地、有效地理解并掌握WebGL的實驗方法與關(guān)鍵技術(shù)。

2 國內(nèi)外研究動態(tài)（The domestic and foreign

research tendency）

2.1 國內(nèi)現(xiàn)狀

網(wǎng)頁DIY產(chǎn)品定制平臺是指在網(wǎng)站交易的基礎(chǔ)之上對客戶提供多樣化的產(chǎn)品設(shè)計種類以及產(chǎn)品細(xì)節(jié)選擇定制的創(chuàng)意交互網(wǎng)站。在網(wǎng)站上，人們自己充當(dāng)設(shè)計師選擇想要的產(chǎn)品種類，再對選擇的產(chǎn)品進(jìn)行DIY設(shè)計，專屬打造自己的獨一無二的個性化產(chǎn)品[1]。

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

但是現(xiàn)在，我國很多的DIY產(chǎn)品企業(yè)都是處于小作坊經(jīng)營階段，無論是淘寶網(wǎng)店還是門店都是分散經(jīng)營，產(chǎn)品單一，數(shù)量繁雜，沒有統(tǒng)一的歸類和宣傳，無論是生產(chǎn)、經(jīng)營環(huán)節(jié)，都缺乏規(guī)?；慕?jīng)營與管理思路，這就一定程度上對客戶在DIY產(chǎn)品定制方面上的興趣形成了一種無形的削減，導(dǎo)致長期以來，這個行業(yè)都沒有被重視。

2.2 國外現(xiàn)狀

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

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

2.3 發(fā)展動態(tài)

綜合國內(nèi)外的發(fā)展現(xiàn)狀可以總結(jié)，在個性化產(chǎn)品定制中，要滿足用戶的個性化需求，就必須與用戶進(jìn)行有效、實時的溝通，讓其參與到產(chǎn)品的整個生產(chǎn)周期中。而網(wǎng)絡(luò)上搭建的虛擬現(xiàn)實交互系統(tǒng)就能夠?qū)⑻摂M產(chǎn)品模型實時展現(xiàn)，并且用戶能實時瀏覽模型，對產(chǎn)品的虛擬模型進(jìn)行可交互操作，生成讓用戶滿意的產(chǎn)品模型[3]。如今，虛擬現(xiàn)實技術(shù)已發(fā)展的相當(dāng)成熟。利用虛擬現(xiàn)實開發(fā)工具與規(guī)范編程語言相結(jié)合，就能讓用戶在客戶端對產(chǎn)品三維虛擬模型進(jìn)行實時交互控制，生成與客戶需求相符的虛擬產(chǎn)品模型。

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

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

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

3 總體設(shè)計思路與內(nèi)容（General design idea and

contents）

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

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

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

customization platform

4 實驗開發(fā)環(huán)境建設(shè)（Experiment development

environment construction）

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

5 實驗方法與關(guān)鍵技術(shù)剖析（Experimental methods

and key techniques）

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

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

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

（1）載入OBJ模型。

（2）加載紋理。

（3）紋理設(shè)置為實時更新。

（4）顯示OBJ模型。

（5）創(chuàng)建控制菜單。

（6）IF菜單中模型的編號不為現(xiàn)在顯示的模型編號，則將當(dāng)前模型修改為不可見將編號對應(yīng)模型修改為可見。

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

（8）IF菜單中回環(huán)次數(shù)的值與當(dāng)前顯示的模型的回環(huán)次數(shù)值不同，則將當(dāng)前模型的回環(huán)次數(shù)修改為菜單中回環(huán)次數(shù)的值。

（9）IF菜單中回環(huán)方式對應(yīng)的的值與當(dāng)前顯示的模型的回環(huán)方式對應(yīng)的值不同，則將當(dāng)前模型的回環(huán)方式對應(yīng)的修改為菜單中回環(huán)方式對應(yīng)的值。

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

5.1 3D模型加載與使用功能的實現(xiàn)

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

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

var loader=new THREE.OBJLoader（manager）；<！--創(chuàng)建-->

loader.load（'obj/male02/beizi1.obj'，function （object）{<！--讀取目標(biāo)文件-->

object.name="1"；<！--將此模型命名為1-->

object.scale.x=object.scale.y=object.scale.z=4；<！--模型放大4倍-->

object.position.y=-100；<！--模型初始位置Y坐標(biāo)為-100-->

object.traverse（function （child） {<！--找到模型下的每一個組件-->

if （child instanceofTHREE.Mesh） {<！--如果組件是一個Mesh-->

child.material.map=texture1；<！--給其附上紋理-->

}

}）；

scene.add（object）；<！--將模型添加進(jìn)場景中-->

}，onProgress，onError）；

5.2 菜單管理功能的實現(xiàn)

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

<！--加載菜單相關(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（"藍(lán)"）.step（0.1）；

<！--創(chuàng)建一個控制紋理背景顏色藍(lán)色分量的選項，取值范圍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)建一個可以下拉選擇的部件皮膚選擇菜單-->

5.3 模型切換功能的實現(xiàn)

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

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；

<！--在將模型添加進(jìn)場景前將模型的可見屬性設(shè)置為不可見-->

scene.add（object）；

}，onProgress，onError）；

if（model=="01"）{

if（mesh1.visible==false）

mesh1.visible=true；

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

mesh2.visible=false；

mesh3.visible=false；

mesh=mesh1；

}

if（model=="02"）{

mesh1.visible=false；

mesh2.visible=true；

mesh3.visible=false；

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

mesh=mesh2；

}

if（model=="03"）{

mesh1.visible=false；

mesh2.visible=false；

mesh3.visible=true；

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

mesh=mesh3；

}

5.4 紋理控制功能模塊的實現(xiàn)

5.4.1 紋理的加載功能的實現(xiàn)

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

var texture1=new THREE.Texture（）；<！--創(chuàng)建-->

var loader=newTHREE.ImageLoader（manager）；<！--創(chuàng)建-->

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

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

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

}）；

5.4.2 紋理控制各項功能的實現(xiàn)

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

function change（texture，color）{

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

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；<！--將菜單中藍(lán)色分量賦給紋理-->

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

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

}

6 實驗結(jié)果及討論（Experiment result and

discussions）

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

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

product customization

平臺的產(chǎn)品定制入口界面如圖4所示，用戶根據(jù)需要點擊相應(yīng)的產(chǎn)品名稱進(jìn)入對應(yīng)的用戶DIY產(chǎn)品界面。

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

7 結(jié)論（Conclusion）

本文以線上個性化產(chǎn)品定制平臺的開發(fā)為例，結(jié)合《網(wǎng)站設(shè)計》實驗教學(xué)過程中的內(nèi)容與方法實踐研究，深入淺出地對WebGL在當(dāng)下新興領(lǐng)域DIY產(chǎn)品定制網(wǎng)站開發(fā)中的關(guān)鍵技術(shù)進(jìn)行詳細(xì)地剖析，使學(xué)生能夠更加容易地、有效地理解并掌握WebGL的關(guān)鍵技術(shù)及其發(fā)展動態(tài)；通過技術(shù)與藝術(shù)相結(jié)合，在網(wǎng)絡(luò)經(jīng)營等方面也有著巨大的潛力和應(yīng)用價值。

參考文獻(xiàn)（References）

[1] 彭飛，等.基于Web的個性化產(chǎn)品定制系統(tǒng)的體系結(jié)構(gòu)研究[J].機械設(shè)計，2002（3）：3-5.

[2] 祁國寧，顧新建.大批量定制—21世紀(jì)制造業(yè)的主流生產(chǎn)模式[J].國際學(xué)術(shù)動態(tài)，2006（6）：28-33.

[3] 安琳.面向動態(tài)需求的產(chǎn)品定制系統(tǒng)構(gòu)建方法研究[D].陜西：西北工業(yè)大學(xué)，2005.

[4] 魏海燕，等.面向虛擬產(chǎn)品開發(fā)的機床動態(tài)設(shè)計系統(tǒng)研究[J].機床與液壓，2003（4）：97-98.

[5] 李伯虎，等.復(fù)雜產(chǎn)品虛擬樣機工程的研究與初步實踐[J].系統(tǒng)仿真學(xué)報，2002，14（3）：336-340.

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

[7] 趙占西.產(chǎn)品造型設(shè)計材料與工藝[M].北京：機械工業(yè)出版社，2012.

作者簡介：

楊 猛（1982-），男，博士，副教授.研究領(lǐng)域：計算機圖形學(xué)，虛擬現(xiàn)實，增強現(xiàn)實，WebGL計算機動畫.

李 曄（1995-），女，本科生.研究領(lǐng)域：計算機圖形學(xué).

劉 帥（1994-），男，本科生.研究領(lǐng)域：計算機圖形學(xué).

趙思敏（1995-），女，本科生.研究領(lǐng)域：計算機圖形學(xué).

何臨風(fēng)（1995-），男，本科生.研究領(lǐng)域：計算機圖形學(xué).

韓 月（1994-），女，本科生.研究領(lǐng)域：計算機圖形學(xué).

楊 剛（1977-），男，博士，副教授.研究領(lǐng)域：計算機圖形學(xué)，虛擬現(xiàn)實.endprint