基于個性化教育的實驗項目的開發：3D玫瑰花

王欣欣，鄭陽平

(承德石油高等專科學校 計算機與信息工程系，河北 承德 067000)

個性化教育這個名詞的起源可以追溯到兩千多年前，孔子曾經提出的“因材施教，有教無類”的教育思想。在中國教育的發展過程中，尤其是近年來，越來越重視個性化教育的發展與實施。在《國家中長期教育改革與發展規劃綱要(2010—2020年)》和《國家教育事業發展“十三五”規劃》中多次提及個性化教育和利用信息化開展教學創新。如今，信息化技術的飛速發展，讓個性化教育的快速實施如虎添翼，學習者只要充分利用手機等終端設備，隨時隨地遨游在信息化教學云平臺上，進行泛在化的個性化自主學習。因此，信息化教學資源建設中個性化的實踐實驗項目開發與設計變得尤為重要，如何能有效地激發學習者學習興趣和愛好，成為開發與設計信息化教學資源的關鍵[1-2]。本文以“網頁設計與制作”課程中的JavaScript技術的使用為例，說明如何設計和開發一個學生既喜歡，又能激發學習興趣，提高課堂教學效果的“純JS編寫的3D玫瑰花”綜合項目教學案例設計過程[3]。

1 基于個性化教學的綜合實驗項目的選取

綜合實驗項目案例的選取一要符合課程教學目標，二要貼近課程單元教學內容，三要來源于實際生活但要高于生活，既體現知識的綜合運用，又激發學生學習興趣，以學生為中心開發教學案例。因此，在“網頁設計與制作”課程的JavaScript技術的使用單元內容中，選擇“應用JavaScript技術，編寫純代碼的“3D玫瑰花”。

“3D玫瑰花”案例是應用JavaScript腳本語言，編寫多個不同形狀的圖形，最終組成一個逼真的3D玫瑰花，整體效果如圖1所示。一共使用了點、圓、柱等31個圖形形狀，構成一個由1個花莖、2片葉子、4個萼片和24個花瓣組成的玫瑰花。這里的每一個形狀均用Javascript腳本語言編寫完成，3D逼真的玫瑰花采用蒙特卡羅方法(Monte Carlo methods)呈現其效果，讓學生體會Javascript腳本語言的強大功能。

2 實驗環境和主要技術介紹

2.1 實驗環境

1)Windows環境：網頁編輯工具+瀏覽器，如Dreamweaver CS6+ Firefox/IE等；

2)Liunx環境：Liunx命令行終端+瀏覽器+編輯器：如Terminal+Firefox+GVim等；

2.2 主要技術知識

1)Z-Buffer也叫深度緩存算法，是在為物件進行著色時，執行“隱藏面消除”工作的一項技術，使隱藏物件背后的部分不被顯示，在三維環境中每個像素中會利用一組數據資料來定義像素在顯示時的縱深度(即Z軸坐標值)，Z-Buffer所用的位數越高，則代表該顯卡所提供的物件縱深感也越精確[4]。

2)歐拉旋轉定理(Euler’s rotation theorem)，指的是在3D空間內，任何共原點的兩個坐標系之間的關系，是一個繞著包含原點的固定軸的旋轉，這樣形成一個四元數；任何兩個坐標系的相對定向，可以由一組四個數字來設定，其中三個數字是用來設定特征矢量(固定軸)，即方向余弦，第四個數字是繞著固定軸旋轉的角值[5]。

3)蒙特卡羅方法(Monte Carlo methods)也稱統計模擬方法，是以概率和統計理論方法為基礎的一種計算方法，是使用隨機數(或常見的偽隨機數)來解決很多計算問題的方法，將所求解的問題同一定的概率模型相聯系，用電子計算機實現統計模擬或抽樣，以獲得問題的近似解[6]。其整體思路分為三步：第一步：模擬，構造或描述概率過程，即將不具有隨機性質的問題轉化為隨機性質的問題；第二步：抽樣，從已知概率分布(0,1)上實現隨機抽樣；第三步：估值，在模型中用統計方法建立各種各樣的估計量，對登記和考察的模擬實驗結果進行驗證，從而獲得實際問題的解。

3 基于個性化教學的綜合實驗項目教學案例設計及實施步驟

基于個性化教學資源、教學案例和實踐項目的開發與設計是一個系統的工程，每一資源、每一個案例、每一個實踐項目都應按照宏觀認識、細化分解、由淺到深、層次遞進的思路進行開發設計。下面通過“3D玫瑰花”的實踐教學案例說明教學資源設計與開發整個過程。

3.1 第一步：繪制玫瑰花瓣

1)定義一個表面為50 px*50 px的單元區域，a與b為采樣范圍參數，編寫形狀描繪代碼：

采用采樣間隔為0.1 px，并縮小間隔到0.001 px，效果圖如圖2所示。

2)同理，使用公式(X-X0)2+(Y-Y0)2

還需附加一個采樣條件，防止溢出：

4)花瓣增加梯度和上色。給花瓣增加梯度使其具有立體感r:100+Math.floor((1-b)*155)。給花瓣上色為紅色，效果如圖3所示。

3.2 第二步：3D 曲面和透視投影

1)定義一個三維表面，以管狀物為例，將管狀物的橫截面圓心定位在(0，0，0)位置上，一半放在X/Y平面之下，另一半放在X/Y平面之上。

2)添加投影透視圖。如圖5所示，首先定義畫布X和Y的坐標為pX和pY，定義一個攝像頭camera，設置cameraZ=-700。設置perspective=350，即確定畫布在X/Y平面下方350距離的平面上，最后確定投影到畫布上的采樣點，得到的效果圖如圖5所示。主要代碼如下：

3.3 第三步：Z-Buffer技術處理圖形圖像

Z-Buffer是深度緩存算法，計算機圖形圖像處理常用的“隱藏面消除”技術，定義var zBuffer=[],zBufferIndex;通過Z-Buffer對物件著色時，使隱藏在物件背后的部分不會被顯示出來，處理后的玫瑰花如圖6所示，立體感明顯增強。其核心代碼如下。

3.4 第四步：矢量旋轉

旋轉的方法很多，只要是矢量旋轉的方法都可以，這里采用歐拉旋轉法，將之前定義的管狀物繞Y軸旋轉，弧度為yAxisRotationAngle=-0.4。

3.5 第五步：蒙特卡羅方法呈現3D玫瑰花效果

采用蒙特卡羅方法合理設置采樣間隔，通過Math.random()設置a與b為隨機采樣參數，使用循環完成每次一萬個像素點的繪制，用足夠的采樣完成表面填充，避免采樣間隔過大或者過小都會引起極差的視覺效果。核心代碼如下：

3.6 第六步：優化顯示效果

為了使3D玫瑰花顯示效果更好，通過為玫瑰花的每個部分設置一個返回值參數來進行同步，使得花的每個部件同時顯示出來，用一個分段函數代表玫瑰的各個組成部分。最后，將調試后的完整Javascript代碼嵌入到HTML網頁文件中，保存運行即可查看實驗效果(見圖1)。

3.7 第七步：注意事項及總結

需要注意的是，如果表面填充效果出現問題，那就是隨機數參數發生了錯誤，或者有些瀏覽器中Math.random的執行是線性的。可以通過更換瀏覽器，或者使用隨機數算法實現高質量的PRNG采樣，如類似Mersenne Twister的算法，可以有效地避免錯誤的出現。

學生在實踐練習的過程中，交流溝通、上網查詢和及時總結，尤其是對問題的總結交流，都是學習者經驗積累的過程，知識增長的過程和自我提升的過程。通過本實踐項目，舉一反三，融會貫通，層次遞進地進行與此類似的更高級別的項目演練，是培養自主學習和個性化學習最佳方式之一。

4 實踐應用效果

本文以“3D玫瑰花”的實驗項目案例設計與開發為例，旨在說明，教學資源的建設必須以學生為中心，以激發學生學習興趣目標，開發和設計具有魅力的個性化教學資源是個性化教育和新時期教育發展的迫切需求。通過一個完整的綜合實驗項目案例，網頁制作的Javascript技術知識得到靈活應用，使學生感到短小精巧的JS代碼，竟然產生如此強悍的效果,從而提升其后續課程的學習興趣。通過調查和課堂教學發現，通過新穎的教學案例的引入，學生學習熱情顯著提高，積極參與課堂活動，更樂于把自己作品分享給自己朋友和同學，教學效果顯著提升。但是，課程中類似的個性化教學資源和案例還有所欠缺，今后一定加大力度建設面向個性化的教育教學資源，加強線上線下的混合學習，全面推進個性化教育快速實施，提高人才培養質量。