技術(shù)報(bào)告《網(wǎng)站設(shè)計(jì)》實(shí)驗(yàn)教學(xué)內(nèi)容與方法改革探討

1、計(jì)劃類別 項(xiàng)目編號(hào) 項(xiàng)目技術(shù)報(bào)告課題名稱 項(xiàng)目主持人 承擔(dān)單位 題目：網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)教學(xué)內(nèi)容與方法改革探討WebGL是一種在網(wǎng)頁(yè)上用戶交互展現(xiàn)三維立體場(chǎng)景的網(wǎng)頁(yè)編程技術(shù)，是“網(wǎng)站設(shè)計(jì)”課程實(shí)驗(yàn)教學(xué)環(huán)節(jié)中重點(diǎn)教學(xué)內(nèi)容之一。WebGL技術(shù)具有專業(yè)性強(qiáng)、編碼復(fù)雜、難于掌握等特點(diǎn)，因此，它也是實(shí)驗(yàn)教學(xué)方法改革中的難點(diǎn)之一。本文以功能完善的個(gè)性化產(chǎn)品定制平臺(tái)為例，重點(diǎn)研究了實(shí)驗(yàn)教學(xué)過(guò)程中WebGL的關(guān)鍵功能的技術(shù)實(shí)現(xiàn)方法并且闡述了其良好的發(fā)展前景，便于教師深入淺出地講解WebGL技術(shù)，并使學(xué)生能夠更加容易地、有效地、方便地理解并掌握WebGL的實(shí)驗(yàn)方法與關(guān)鍵技術(shù)。關(guān)鍵詞：WebGL技術(shù)；個(gè)性化；產(chǎn)品定制；

2、發(fā)展動(dòng)態(tài)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

3、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 WebGLs essential technology and its good prospects for development during experimental teaching，

4、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 trend1 引言（Introduction）W

5、ebGL是當(dāng)下越發(fā)興起的一種網(wǎng)頁(yè)編程技術(shù)，它把JavaScript和OpenGL ES 2.0結(jié)合在一起，為HTML5 Canvas提供硬件3D加速渲染，使得在瀏覽器里能夠更加流暢的展示3D場(chǎng)景和模型。因此，WebGL是當(dāng)前“網(wǎng)站設(shè)計(jì)”課程教學(xué)中的重要教學(xué)內(nèi)容之一。同時(shí)，WebGL技術(shù)具有專業(yè)性強(qiáng)、編碼復(fù)雜、難于掌握等特點(diǎn)，因此，它也是實(shí)驗(yàn)教學(xué)過(guò)程中的難點(diǎn)之一。本文以構(gòu)建功能完善的個(gè)性化產(chǎn)品定制平臺(tái)以及總結(jié)其在國(guó)內(nèi)外的發(fā)展現(xiàn)狀為例，深入淺出地介紹實(shí)驗(yàn)教學(xué)過(guò)程中該平臺(tái)的關(guān)鍵技術(shù)的實(shí)現(xiàn)方法與過(guò)程以及發(fā)展動(dòng)態(tài)，便于教師講解WebGL技術(shù)，并使學(xué)生能夠更加容易地、有效地理解并掌握WebGL的實(shí)驗(yàn)方法與

6、關(guān)鍵技術(shù)。2 國(guó)內(nèi)外研究動(dòng)態(tài)（The domestic and foreignresearch tendency）2.1 國(guó)內(nèi)現(xiàn)狀網(wǎng)頁(yè)DIY產(chǎn)品定制平臺(tái)是指在網(wǎng)站交易的基礎(chǔ)之上對(duì)客戶提供多樣化的產(chǎn)品設(shè)計(jì)種類以及產(chǎn)品細(xì)節(jié)選擇定制的創(chuàng)意交互網(wǎng)站。在網(wǎng)站上，人們自己充當(dāng)設(shè)計(jì)師選擇想要的產(chǎn)品種類，再對(duì)選擇的產(chǎn)品進(jìn)行DIY設(shè)計(jì)，專屬打造自己的獨(dú)一無(wú)二的個(gè)性化產(chǎn)品1。目前，DIY產(chǎn)品行業(yè)在我國(guó)國(guó)內(nèi)的競(jìng)爭(zhēng)力已不容小覷，越來(lái)越多的人們的產(chǎn)品需求更加趨于個(gè)性化。DIY個(gè)性定制產(chǎn)品行業(yè)的趨勢(shì)如此看來(lái)是不可阻擋的，很有可能會(huì)繼續(xù)延伸到生活的各個(gè)方面，從而掀起一股個(gè)性定制的浪潮。但是現(xiàn)在，我國(guó)很多的DIY產(chǎn)品企業(yè)都是

7、處于小作坊經(jīng)營(yíng)階段，無(wú)論是淘寶網(wǎng)店還是門(mén)店都是分散經(jīng)營(yíng)，產(chǎn)品單一，數(shù)量繁雜，沒(méi)有統(tǒng)一的歸類和宣傳，無(wú)論是生產(chǎn)、經(jīng)營(yíng)環(huán)節(jié)，都缺乏規(guī)?；慕?jīng)營(yíng)與管理思路，這就一定程度上對(duì)客戶在DIY產(chǎn)品定制方面上的興趣形成了一種無(wú)形的削減，導(dǎo)致長(zhǎng)期以來(lái)，這個(gè)行業(yè)都沒(méi)有被重視。2.2 國(guó)外現(xiàn)狀和國(guó)內(nèi)相比，國(guó)外的DIY產(chǎn)品定制行業(yè)發(fā)展的要好得多，現(xiàn)在國(guó)外已經(jīng)有多家網(wǎng)站在線提供產(chǎn)品設(shè)計(jì)定制服務(wù)，客戶可以登錄網(wǎng)站，自行設(shè)計(jì)自己想要的個(gè)性化產(chǎn)品，打造自己的獨(dú)一無(wú)二2。這樣不僅能滿足人們對(duì)于個(gè)性化產(chǎn)品的需求，此外，相比國(guó)內(nèi)單一的在商店購(gòu)買(mǎi)已經(jīng)打造好的個(gè)性產(chǎn)品，網(wǎng)站在線設(shè)計(jì)可以讓人們根據(jù)自己的喜好來(lái)對(duì)產(chǎn)品進(jìn)行配色、貼圖等功能。

8、在這一方面，廣為人知的例子當(dāng)屬NIKE品牌推出的NIKEID服務(wù)了，NIKEID服務(wù)就是NIKE推出的在線定制球鞋服務(wù)，客戶可以根據(jù)自己的喜好，個(gè)性化打造自己的專屬戰(zhàn)靴。網(wǎng)站上有上百種鞋款供人們選擇，人們還可以對(duì)其進(jìn)行材料顏色的選擇修改以及添加一些個(gè)性化的符號(hào)等，使客戶可以通過(guò)自己的行動(dòng)來(lái)向他人呈現(xiàn)出自己的想法與個(gè)性。不足的是，對(duì)于NIKE的NIKEID服務(wù)，雖然相比于國(guó)內(nèi)有著更加人性化的設(shè)計(jì)，更加迎合人們自己設(shè)計(jì)的消費(fèi)心理，然而它們的產(chǎn)品種類卻趨于單一化，只是有NIKE鞋類的定制，限制了人們心中對(duì)于其他種類產(chǎn)品定制的想法，也進(jìn)一步說(shuō)明DIY個(gè)性產(chǎn)品定制還需要進(jìn)一步的完善與發(fā)展以滿足人們各種想

9、法的實(shí)現(xiàn)。endprint2.3 發(fā)展動(dòng)態(tài)綜合國(guó)內(nèi)外的發(fā)展現(xiàn)狀可以總結(jié)，在個(gè)性化產(chǎn)品定制中，要滿足用戶的個(gè)性化需求，就必須與用戶進(jìn)行有效、實(shí)時(shí)的溝通，讓其參與到產(chǎn)品的整個(gè)生產(chǎn)周期中。而網(wǎng)絡(luò)上搭建的虛擬現(xiàn)實(shí)交互系統(tǒng)就能夠?qū)⑻摂M產(chǎn)品模型實(shí)時(shí)展現(xiàn)，并且用戶能實(shí)時(shí)瀏覽模型，對(duì)產(chǎn)品的虛擬模型進(jìn)行可交互操作，生成讓用戶滿意的產(chǎn)品模型3。如今，虛擬現(xiàn)實(shí)技術(shù)已發(fā)展的相當(dāng)成熟。利用虛擬現(xiàn)實(shí)開(kāi)發(fā)工具與規(guī)范編程語(yǔ)言相結(jié)合，就能讓用戶在客戶端對(duì)產(chǎn)品三維虛擬模型進(jìn)行實(shí)時(shí)交互控制，生成與客戶需求相符的虛擬產(chǎn)品模型。在我國(guó)，虛擬現(xiàn)實(shí)技術(shù)在個(gè)性化產(chǎn)品定制方面的研究已經(jīng)取得了一些成果。有王先逵教授的“面向虛擬產(chǎn)品開(kāi)發(fā)的機(jī)床動(dòng)態(tài)

10、設(shè)計(jì)系統(tǒng)研究”4，李伯虎院士的“復(fù)雜產(chǎn)品虛擬樣機(jī)工程的研究與初步實(shí)踐”的研究5，楊宇航教授“基于Transom Jack仿真支持平臺(tái)的維修仿真系統(tǒng)”6的研究等。這些研究都在其領(lǐng)域里取得了成果。除了虛擬現(xiàn)實(shí)技術(shù)外，要實(shí)現(xiàn)本項(xiàng)目研究的DIY產(chǎn)品定制平臺(tái)，3D打印技術(shù)也是有著重要作用的，在此平臺(tái)下，客戶產(chǎn)品的需求數(shù)量一般只是少數(shù)的幾件，甚至僅為一件，若按傳統(tǒng)的加工制造的方式可能無(wú)法實(shí)現(xiàn)。例如，需要定制一件個(gè)性化的塑料產(chǎn)品，是不可能為了這一件產(chǎn)品來(lái)進(jìn)行模具的設(shè)計(jì)與制造的，因?yàn)槠渲械某杀臼请y于承受的，也勢(shì)必造成社會(huì)生產(chǎn)力的極大浪費(fèi)。而3D打印技術(shù)的出現(xiàn)，就順理成章地解決了個(gè)性化產(chǎn)品實(shí)現(xiàn)層面的問(wèn)題。與傳統(tǒng)

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

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

13、的一些物品，利用3DMax和Photoshop進(jìn)行建模如（馬克杯、鴨舌帽、抱枕、T-shirt、手機(jī)殼、拼圖、雨傘、明信片、氣球、布袋、球類、撲克牌、卡片優(yōu)盤(pán)、口罩、襪子），實(shí)現(xiàn)每一種物品360度查看均能得到逼真的視覺(jué)感受，同時(shí)建立網(wǎng)頁(yè)本身的素材庫(kù)，諸如一些貼圖和圖形，基于HTML、DIV+CSS等技術(shù)，實(shí)現(xiàn)網(wǎng)站整體的構(gòu)建。（2）模塊功能與基本構(gòu)架：平臺(tái)的基本功能架構(gòu)如圖1所示，用戶根據(jù)需要點(diǎn)擊相應(yīng)的產(chǎn)品名稱進(jìn)入對(duì)應(yīng)的用戶DIY產(chǎn)品界面。用戶在進(jìn)行自主設(shè)計(jì)時(shí)需要有良好的交互性，能讓設(shè)計(jì)更加的輕松自如，基于WebGL等技術(shù)，從用戶體驗(yàn)和頁(yè)面功能設(shè)置及布局上進(jìn)行研究，使用戶使用簡(jiǎn)單的操作即可以將自

14、己設(shè)置的圖形完美貼合在模板上，輕松實(shí)現(xiàn)自己的想法。個(gè)性化產(chǎn)品定制平臺(tái)主要功能是讓用戶在網(wǎng)站上能夠?qū)?D模型進(jìn)行實(shí)時(shí)的處理，因此，其應(yīng)用到的技術(shù)包括3D建模、html建站以及網(wǎng)頁(yè)中的3D模型的加載及處理。對(duì)于3D建模和html建站，應(yīng)用Dreamweaver、3DMax等軟件即可實(shí)現(xiàn)，而作為近年來(lái)新興的WebGL技術(shù)，由于現(xiàn)在的參考資料較少，所以在實(shí)現(xiàn)3D模型在網(wǎng)頁(yè)中的加載并且對(duì)其進(jìn)行控制處理的問(wèn)題上遇到了不少的瓶頸。針對(duì)在實(shí)現(xiàn)平臺(tái)功能的過(guò)程中遇到的相關(guān)WebGL技術(shù)，下文對(duì)其進(jìn)行了詳細(xì)的技術(shù)剖析。customization platform4 實(shí)驗(yàn)開(kāi)發(fā)環(huán)境建設(shè)（Experiment devel

15、opmentenvironment construction）基于WebGL的個(gè)性化產(chǎn)品定制平臺(tái)的開(kāi)發(fā)與運(yùn)行的環(huán)境：開(kāi)發(fā)環(huán)境為普通的PC機(jī)，開(kāi)發(fā)軟件為Dreamweaver、3DMax、Photoshop等，開(kāi)發(fā)語(yǔ)言為HTML、JavaScript、WebGL等。運(yùn)行環(huán)境為Windows 95/98/2000/XP+IE5.5，Windows media player以上版本。5 實(shí)驗(yàn)方法與關(guān)鍵技術(shù)剖析（Experimental methodsand key techniques）個(gè)性化產(chǎn)品定制平臺(tái)主要功能是讓用戶在網(wǎng)站上能夠?qū)?D模型進(jìn)行實(shí)時(shí)的處理，因此，其應(yīng)用到的技術(shù)包括3D建模、html

16、建站，以及網(wǎng)頁(yè)中3D模型的加載及處理。對(duì)于3D建模和html建站，我們應(yīng)用Dreamweaver、3DMax等軟件并對(duì)其深入學(xué)習(xí)即可實(shí)現(xiàn)，而作為近年來(lái)新興的WebGL技術(shù)，由于現(xiàn)在的參考資料較少，所以在實(shí)現(xiàn)3D模型在網(wǎng)頁(yè)中的加載處理功能上遇到了不少的瓶頸，因此針對(duì)于WebGL技術(shù)，做了以下關(guān)于網(wǎng)站關(guān)鍵功能實(shí)現(xiàn)的技術(shù)剖析。為了實(shí)現(xiàn)能讓用戶實(shí)時(shí)查看并修改設(shè)計(jì)自己想要的產(chǎn)品，一方面需要將模型實(shí)時(shí)顯示在網(wǎng)頁(yè)上，讓用戶能夠360度的觀察這個(gè)模型，另一方面也需要給予用戶修改模型上內(nèi)容的能力，例如用戶可自由調(diào)整紋理貼圖的樣式以及位置，甚至整個(gè)模型的底色等等，這些功能實(shí)現(xiàn)如算法1所示。endprint算法1：

17、載入一個(gè)3D模型并生成菜單可其上面的紋理信息。（1）載入OBJ模型。（2）加載紋理。（3）紋理設(shè)置為實(shí)時(shí)更新。（4）顯示OBJ模型。（5）創(chuàng)建控制菜單。（6）IF菜單中模型的編號(hào)不為現(xiàn)在顯示的模型編號(hào)，則將當(dāng)前模型修改為不可見(jiàn)將編號(hào)對(duì)應(yīng)模型修改為可見(jiàn)。（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)方式對(duì)應(yīng)的的值與當(dāng)前顯示的模型的回環(huán)方式對(duì)應(yīng)的值不同，則將當(dāng)前模型的回環(huán)方式對(duì)應(yīng)的修改為菜單中回環(huán)方式對(duì)應(yīng)的

18、值。（10）IF菜單中紋理X、Y偏移量的值與當(dāng)前顯示的模型的紋理X、Y偏移量的值不同，則將當(dāng)前模型的紋理X、Y偏移量的值修改為菜單中紋理X、Y偏移量的值。5.1 3D模型加載與使用功能的實(shí)現(xiàn)3D模型的導(dǎo)入是最為重要的一個(gè)部分，WEBGL對(duì)現(xiàn)在許多市面上大多數(shù)3D模型格式都能支持，在這里我們選擇的是OBJ格式的模型，將由3DMAX等軟件制作出來(lái)的模型導(dǎo)入并顯示出來(lái)，我們才能實(shí)現(xiàn)后續(xù)的功能，程序相關(guān)代碼如下：var loader=new THREE.OBJLoader（manager）；loader.load（obj/male02/beizi1.obj，function （object）=1；ob

19、ject.scale.x=object.scale.y=object.scale.z=4；object.position.y=-100；object.traverse（function （child） if （child instanceofTHREE.Mesh） child.material.map=texture1；）；scene.add（object）；，onProgress，onError）；5.2 菜單管理功能的實(shí)現(xiàn)菜單管理導(dǎo)航的內(nèi)容有：模型編號(hào)選擇、紋理控制、部件選擇和部件皮膚選擇，其中紋理控制分為紋理重復(fù)的次數(shù)、紋理回環(huán)的方式、紋理在X軸上的偏移量，紋理在Y軸上的偏移量，紋理背景

20、顏色的RGB分量選擇。程序相關(guān)代碼如下：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（杯子編號(hào)）.onChange（render）；h=gui.addFolder（Material control）；h.add（pa

21、ra，repeat，1，5）.name（紋理重復(fù)）；h.add（para，wrap，1，3）.name（紋理環(huán)繞）.step（1）；h.add（para，offsetX，-1.0，1.0）.name（紋理X偏移）.step（0.1）；h.add（para，offsetY，-1.0，1.0）.name（紋理Y偏移）.step（0.1）；h.add（para，b，0，1）.name（藍(lán)）.step（0.1）； h.add（para，g，0，1）.name（綠）.step（0.1）；h.add（para，r，0，1）.name（紅）.step（0.1）；h=gui.addFolder（model s

22、elect）；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 模型切換功能的實(shí)現(xiàn)為了給用戶提供方便也提供更多的選擇，我們?cè)僖粋€(gè)界面中為用戶提供多種模型的選擇，所以

23、菜單中第一項(xiàng)就是一個(gè)下拉菜單，可以選擇模型，并且切換的很快，實(shí)際上是一開(kāi)始就加載了所有模型，只是每次只顯示其中一個(gè)。相關(guān)代碼如下：loader.load（obj/male02/beizi2.obj，function（object）=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；）；o

24、bject.visible=false；scene.add（object）；，onProgress，onError）；if（model=01）if（mesh1.visible=false）mesh1.visible=true；mesh2.visible=false；mesh3.visible=false；mesh=mesh1；if（model=02）mesh1.visible=false；mesh2.visible=true；mesh3.visible=false；mesh=mesh2；if（model=03）mesh1.visible=false；mesh2.visible=false；me

25、sh3.visible=true；mesh=mesh3；5.4 紋理控制功能模塊的實(shí)現(xiàn)5.4.1 紋理的加載功能的實(shí)現(xiàn)在3D模型加載并顯示之后，我們還需要給其附上紋理才能達(dá)到真實(shí)好看的效果，首先就需要與3D模型加載類似的對(duì)紋理進(jìn)行加載，程序相關(guān)代碼如下：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

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

27、exture ！=null）texture.repeat.x=texture.repeat.y=para.repeat；texture.offset.x=para.offsetX；texture.offset.y=para.offsetY；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 實(shí)驗(yàn)結(jié)果及討論（Experiment result anddiscussions）基于WebGL的個(gè)性化產(chǎn)品定制平臺(tái)的開(kāi)發(fā)與運(yùn)行的環(huán)境：開(kāi)發(fā)環(huán)境為普通的PC機(jī)，開(kāi)發(fā)軟件為Dreamweaver、3ds Max、Photoshop等，開(kāi)發(fā)語(yǔ)言為HTM