何博　王祖源　萬(wàn)昆

摘 要：目前，各種各樣的學(xué)習(xí)平臺(tái)和學(xué)習(xí)終端層出不窮。因此，面對(duì)多樣化的終端設(shè)備，我們?cè)陂_(kāi)發(fā)應(yīng)用程序時(shí)考慮如何實(shí)現(xiàn)在不同設(shè)備的無(wú)差異化移植顯得越來(lái)越重要。如何運(yùn)用相關(guān)技術(shù)保證跨終端、跨平臺(tái)的統(tǒng)一用戶(hù)體驗(yàn)，這是值得探索的問(wèn)題。針對(duì)一般的三維物理模型存在跨平臺(tái)問(wèn)題，文章通過(guò)研究WebGL技術(shù)在構(gòu)建三維物理模型中的應(yīng)用，提出了利用瀏覽器對(duì)WebGL的支持來(lái)解決跨平臺(tái)問(wèn)題的方法。該方法通過(guò)HTML5中Canvas畫(huà)布獲得三維繪制場(chǎng)景，在該場(chǎng)景中利用WebGL第三方庫(kù)（three.js）構(gòu)建三維物理模型，然后由瀏覽器對(duì)模型進(jìn)行渲染，從而解決跨平臺(tái)問(wèn)題。研究結(jié)果表明，WebGL技術(shù)的應(yīng)用為三維物理模型的構(gòu)建提供了新的思路，克服了跨平臺(tái)問(wèn)題，極大地支持泛在學(xué)習(xí)，適應(yīng)教育新常態(tài)——?jiǎng)?chuàng)客教育。

關(guān)鍵詞：三維模型；WebGL；跨平臺(tái)；設(shè)計(jì)與開(kāi)發(fā)；

中圖分類(lèi)號(hào)：G434 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1673-8454（2016）06-0075-05

一、引言

隨著計(jì)算機(jī)技術(shù)和網(wǎng)絡(luò)技術(shù)的快速發(fā)展，虛擬現(xiàn)實(shí)和三維可視化技術(shù)已成為時(shí)下Web技術(shù)的焦點(diǎn)。近年來(lái)3D技術(shù)因其開(kāi)發(fā)和設(shè)計(jì)上的突出優(yōu)勢(shì)而被廣泛應(yīng)用在軟件行業(yè)、3D硬件行業(yè)、數(shù)字娛樂(lè)行業(yè)、制造業(yè)、建筑業(yè)、虛擬現(xiàn)實(shí)、地理信息GIS以及3D互聯(lián)網(wǎng)等行業(yè)[1]。然而當(dāng)互聯(lián)網(wǎng)時(shí)代的熱潮還未褪去時(shí)，移動(dòng)互聯(lián)網(wǎng)時(shí)代已悄然來(lái)臨。隨著手機(jī)、Pad等移動(dòng)設(shè)備的普及，越來(lái)越多的學(xué)校逐步開(kāi)始嘗試開(kāi)放移動(dòng)終端進(jìn)入課堂，更進(jìn)一步將移動(dòng)設(shè)備引入教與學(xué)的過(guò)程。為更好地實(shí)現(xiàn)信息化創(chuàng)新教學(xué)，實(shí)現(xiàn)教師教學(xué)方式的改變與學(xué)生學(xué)習(xí)方式的轉(zhuǎn)變，促進(jìn)學(xué)生的知識(shí)建構(gòu)，實(shí)現(xiàn)泛在學(xué)習(xí)、無(wú)縫學(xué)習(xí)，實(shí)現(xiàn)創(chuàng)客教育。那么如何使教學(xué)資源體現(xiàn)出交互性、移動(dòng)性、智能化，以更好地適應(yīng)課堂教學(xué)方式的變革？這對(duì)我們開(kāi)發(fā)相關(guān)應(yīng)用程序和教學(xué)資源提出了更大挑戰(zhàn)：如何運(yùn)用相關(guān)技術(shù)保證跨終端、跨平臺(tái)的統(tǒng)一用戶(hù)體驗(yàn)？

在過(guò)去，Web3D技術(shù)主要依賴(lài)不同的插件，為了展示3D效果，用戶(hù)不得不安裝各種插件，跨平臺(tái)性較差。隨著HTML5技術(shù)近年來(lái)的迅猛發(fā)展[2]，這種狀況得到了極大改善。特別是隨著HTML5標(biāo)準(zhǔn)的進(jìn)一步規(guī)范和完善，其提供的新特性和新標(biāo)簽?zāi)芨玫剡m應(yīng)現(xiàn)今多終端訪問(wèn)需求。目前，更多的主流瀏覽器如Chrome、Firefox、Safari、Opera以及IE11等對(duì)HTML5和WebGL提供了較好的支持。因此，我們可以在瀏覽器內(nèi)部實(shí)現(xiàn)3D圖形的硬件加速，創(chuàng)建3D游戲或其他高級(jí)的3D圖形應(yīng)用程序，從而使其在不同終端運(yùn)行成為可能。

在此背景下，本文針對(duì)一般三維物理模型存在開(kāi)發(fā)復(fù)雜、硬件要求高以及移植不便等問(wèn)題，研究了WebGL技術(shù)在構(gòu)建三維物理模型中的應(yīng)用，提出了利用瀏覽器對(duì)WebGL的支持來(lái)解決跨平臺(tái)問(wèn)題的方法。該方法利用圖形硬件加速圖形繪制，有著較快的調(diào)用速度，通過(guò)HTML5中Canvas畫(huà)布獲得三維繪制場(chǎng)景，在該場(chǎng)景中利用WebGL第三方庫(kù)（three.js）構(gòu)建三維物理模型，然后由瀏覽器對(duì)模型進(jìn)行渲染和運(yùn)行。該技術(shù)使用方便，不需要任何插件，增加了復(fù)用性和靈活性，且更容易得到跨平臺(tái)的支持，如Windows、Mac OS、Linux、Android和iOS等操作系統(tǒng)的支持。WebGL技術(shù)的應(yīng)用不僅可以克服跨平臺(tái)問(wèn)題，為無(wú)縫學(xué)習(xí)提供很好的支持，而且為構(gòu)建三維物理模型做出了有益的探索和嘗試。

二、無(wú)縫學(xué)習(xí)與創(chuàng)客教育

1.學(xué)習(xí)新常態(tài)——無(wú)縫學(xué)習(xí)

無(wú)縫學(xué)習(xí)是以社會(huì)學(xué)習(xí)、情景學(xué)習(xí)、知識(shí)建構(gòu)為理論基礎(chǔ)，在移動(dòng)設(shè)備下進(jìn)行的一對(duì)一數(shù)字化學(xué)習(xí)[3]。

移動(dòng)終端設(shè)備的普及，人們對(duì)教與學(xué)資源的碎片化、可視化需求，在WebGL技術(shù)下能很好地實(shí)現(xiàn)三維物理模型的可視化，使學(xué)生能更好地理解，符合學(xué)生的認(rèn)知?；赪ebGL技術(shù)的三維物理模型能適合于各種系統(tǒng)軟件和移動(dòng)設(shè)備，在互聯(lián)網(wǎng)+時(shí)代，能更好地適應(yīng)學(xué)生利用碎片化時(shí)間進(jìn)行無(wú)縫學(xué)習(xí)，促進(jìn)學(xué)生學(xué)習(xí)方式的轉(zhuǎn)變，也能很好地適應(yīng)翻轉(zhuǎn)課堂教學(xué)。

2.教育新常態(tài)——?jiǎng)?chuàng)客教育

創(chuàng)客教育是一種融合信息技術(shù)、秉承“開(kāi)放創(chuàng)新、探究體驗(yàn)”教育理念，以“創(chuàng)造中學(xué)”為主要學(xué)習(xí)方式和以培養(yǎng)各類(lèi)創(chuàng)新人才為目的的新型教育模式[4]。在創(chuàng)客教育中，教師角色的轉(zhuǎn)變，從關(guān)注知識(shí)技能教學(xué)，轉(zhuǎn)向培養(yǎng)學(xué)生終身發(fā)展能力和思維的教學(xué)，學(xué)生角色的轉(zhuǎn)變，從知識(shí)的灌輸?shù)街R(shí)建構(gòu)，在做中學(xué)，促進(jìn)學(xué)生知識(shí)建構(gòu)和創(chuàng)造性思維培養(yǎng)?；赪ebGL技術(shù)開(kāi)發(fā)的三維物理模型能促進(jìn)學(xué)生的知識(shí)建構(gòu)，培養(yǎng)學(xué)生高級(jí)思維技能，引領(lǐng)學(xué)生高級(jí)思維的發(fā)展，能引導(dǎo)教師從淺層學(xué)習(xí)走向深層學(xué)習(xí)的教學(xué)策略，有利于學(xué)生創(chuàng)造性思維的培養(yǎng)。

隨著信息技術(shù)的發(fā)展、智能手機(jī)的普及，面對(duì)信息技術(shù)與教育教學(xué)深度融合的今天，人們對(duì)移動(dòng)學(xué)習(xí)資源建設(shè)越來(lái)越重視，能更好地促進(jìn)學(xué)生的無(wú)縫學(xué)習(xí)，在互聯(lián)網(wǎng)時(shí)代，學(xué)生對(duì)碎片化思維與碎片化知識(shí)的需求，有利于學(xué)生學(xué)習(xí)方式的轉(zhuǎn)變?；赪ebGL技術(shù)開(kāi)發(fā)的三維物理模型在物理課堂中的應(yīng)用將是信息化教學(xué)創(chuàng)新必不可少的，三維物理模型的可視化與交互性能更好地促進(jìn)學(xué)生的知識(shí)建構(gòu)，有利于培養(yǎng)學(xué)生的創(chuàng)造性思維，為實(shí)現(xiàn)智慧教育提供可能。

三、WebGL技術(shù)簡(jiǎn)介

1.WebGL技術(shù)

WebGL是一個(gè)用來(lái)在Web上生成三維圖形效果的應(yīng)用編程接口，也是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過(guò)增加OpenGL ES 2.0的一個(gè)JavaScript綁定[5]，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開(kāi)發(fā)人員就可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場(chǎng)景和模型，還能創(chuàng)建更為復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺(jué)化。WebGL技術(shù)直接利用JavaScript編程創(chuàng)建3D場(chǎng)景和動(dòng)畫(huà)，非常復(fù)雜且容易出錯(cuò)?？蚣艿膽?yīng)用極大地簡(jiǎn)化了開(kāi)發(fā)步驟，提高了開(kāi)發(fā)效率，且更易維護(hù)和更新。目前已有大量基于WebGL技術(shù)的JavaScript庫(kù)正在開(kāi)發(fā)以加快創(chuàng)建3D圖形的速度，如GLGE、SceneJS、Three.js等。本文主要采用Three.js開(kāi)發(fā)框架來(lái)實(shí)現(xiàn)三維物理模型的開(kāi)發(fā)。Three.js是一個(gè)很出色的開(kāi)發(fā)框架，該框架以簡(jiǎn)單、直觀的方式封裝了WebGL底層的圖形接口，從而降低了WebGL的使用難度，并且完全開(kāi)源[6]。它提供了一個(gè)JavaScript應(yīng)用程序接口，允許在瀏覽器端未安裝任何插件的情況下進(jìn)行2D/3D硬件加速渲染。

2.三維場(chǎng)景Web顯示設(shè)計(jì)

在三維場(chǎng)景繪制之前，首先需要獲取HTML5的canvas元素，然后通過(guò)該元素獲得WebGL的繪制環(huán)境。在該上下文環(huán)境中，由Three.js通過(guò)以下6個(gè)基本步驟創(chuàng)建三維模型：

（1）設(shè)置場(chǎng)景：場(chǎng)景變量是一個(gè)三維空間，相當(dāng)于一個(gè)大容器，用于存儲(chǔ)和跟蹤我們要渲染的所有物體的軌跡。場(chǎng)景設(shè)置沒(méi)有很復(fù)雜的操作，只需要進(jìn)行實(shí)例化，然后再依次將相機(jī)、燈光、模型等加入場(chǎng)景即可。

（2）設(shè)置相機(jī)：要渲染一個(gè)場(chǎng)景，我們需要一個(gè)相機(jī)來(lái)決定我們?cè)阡秩緢?chǎng)景時(shí)能看到什么。在 Three.js 中能夠指定透視投影和正投影兩種方式的相機(jī)。

（3）設(shè)置光源：在一個(gè)場(chǎng)景中可以設(shè)置多個(gè)光源。Three.js中可以設(shè)置點(diǎn)光源、聚光燈、平行光源和環(huán)境光等?？筛鶕?jù)具體場(chǎng)景模型和需求，添加適合的一種光源或幾種光源的組合。

（4）設(shè)置模型：場(chǎng)景可以添加需要渲染的任何對(duì)象。對(duì)象主要由幾何形狀和材質(zhì)構(gòu)成。材質(zhì)定義了對(duì)象的樣式。我們可以通過(guò)編程來(lái)控制對(duì)象的位置，旋轉(zhuǎn)和縮放。場(chǎng)景中添加的模型可以使用Three.js中的形狀類(lèi)，也可以使用JSON格式或二進(jìn)制格式文件，也可以使用其它流行的3D建模工具（3DMAX、Maya）導(dǎo)出的obj文件，然后由Three.js的不同加載器對(duì)其解析。

（5）設(shè)置渲染器：三維空間里的物體映射到二維平面的過(guò)程被稱(chēng)為三維渲染。一般來(lái)說(shuō)我們都把進(jìn)行渲染操作的軟件叫做渲染器[7]。具體需要生成渲染器對(duì)象、指定渲染器的高寬、設(shè)置渲染器的清除色等。通常設(shè)置好相機(jī)、添加完模型就可以調(diào)用渲染器的渲染函數(shù)來(lái)渲染整個(gè)場(chǎng)景了。

（6）設(shè)置交互：Web頁(yè)面最終呈現(xiàn)模型，以及提供用戶(hù)交互操作。良好的交互設(shè)計(jì)不僅能夠吸引用戶(hù)，增強(qiáng)用戶(hù)體驗(yàn)，而且能夠使用戶(hù)對(duì)模型有更全面的認(rèn)識(shí)。可以從三個(gè)技術(shù)模塊進(jìn)行設(shè)置：HTML5技術(shù)設(shè)計(jì)界面的結(jié)構(gòu)、CSS技術(shù)對(duì)顯示樣式進(jìn)行設(shè)定、DOMEvent處理鼠標(biāo)鍵盤(pán)事件。

通過(guò)以上幾個(gè)步驟，具有交互功能的三維模型就可以在網(wǎng)頁(yè)上顯示。圖1為WebGL的繪圖流程。

四、雙節(jié)擺物理模型的設(shè)計(jì)與實(shí)現(xiàn)

雙節(jié)擺模型是理論力學(xué)的一個(gè)基本模型，也是比較重要的一個(gè)模型。該模型的運(yùn)動(dòng)規(guī)律較為復(fù)雜，通過(guò)模擬雙節(jié)擺的運(yùn)動(dòng)規(guī)律，能夠使抽象的規(guī)律具體化和形象化。該模型主要是兩根長(zhǎng)度為L(zhǎng)1和L2的無(wú)質(zhì)量的細(xì)棒的頂端系有質(zhì)量分別為m1和m2的兩個(gè)球，初始狀態(tài)如圖2所示。我們將利用WebGL標(biāo)準(zhǔn)下的Three.js框架來(lái)模擬該模型從初始狀態(tài)釋放之后的兩小球的運(yùn)動(dòng)軌跡。

1.雙節(jié)擺物理模型的設(shè)計(jì)思路

首先對(duì)該模型進(jìn)行功能分析，該模型需要實(shí)現(xiàn)改變兩個(gè)小球初始位置或者質(zhì)量觀察兩個(gè)小球的運(yùn)動(dòng)軌跡，并能夠繪制兩個(gè)細(xì)棒張力的變化曲線圖，可以對(duì)各物理量變化情況如坐標(biāo)、速度、能量等進(jìn)行采集保存?；谝陨瞎δ苊枋?，我們可以將本模型的實(shí)現(xiàn)歸結(jié)為以下幾點(diǎn)：

（1）畫(huà)布、燈光、相機(jī)和渲染器等基本場(chǎng)景的設(shè)置；

（2）兩個(gè)小球、細(xì)桿、固定點(diǎn)等初始狀態(tài)繪制；

（3）運(yùn)行過(guò)程中小球、細(xì)桿位置及變化曲線圖的動(dòng)態(tài)繪制；

（4）模型交互功能的實(shí)現(xiàn)（模型移動(dòng)、旋轉(zhuǎn)、縮放、參數(shù)改變、數(shù)據(jù)采集）。

本模型的關(guān)鍵是對(duì)小球進(jìn)行受力分析以及運(yùn)動(dòng)軌跡的運(yùn)算。在運(yùn)動(dòng)過(guò)程中忽略空氣的阻力和細(xì)桿的質(zhì)量。在整個(gè)系統(tǒng)中，不斷變化的量是桿的張力、小球的速度、位置以及細(xì)桿的位置，而細(xì)桿的長(zhǎng)度則是保持不變的。我們將固定點(diǎn)坐標(biāo)設(shè)為（y，x，z），小球m1的坐標(biāo)設(shè)為（y1，x1，z1），小球m2的坐標(biāo)設(shè)為（y2，x2，z2），在處理小球速度時(shí)，我們將其分別沿著三個(gè)軸正交分解。

根據(jù)雙節(jié)擺運(yùn)動(dòng)的速度、時(shí)間、細(xì)桿的張力以及系統(tǒng)的能量等來(lái)不斷獲得兩個(gè)小球的坐標(biāo)，從而在不同位置繪制小球和細(xì)桿來(lái)模擬其運(yùn)動(dòng)軌跡。細(xì)桿L1的繪制用繪制直線方法表示，通過(guò)固定點(diǎn)坐標(biāo)和球m1坐標(biāo)來(lái)確定，細(xì)桿L2的繪制通過(guò)球m1的坐標(biāo)和球m2的坐標(biāo)來(lái)確定。

2.雙節(jié)擺物理模型的實(shí)現(xiàn)步驟

首先基于對(duì)模型的設(shè)計(jì)與分析，接下來(lái)開(kāi)始模型的具體實(shí)現(xiàn)：

（1）基本場(chǎng)景設(shè)置

整個(gè)模型的繪制以及實(shí)現(xiàn)是基于Canvas畫(huà)布實(shí)現(xiàn)的，Canvas元素有兩個(gè)屬性width和height來(lái)定義其大小。我們?cè)赪eb頁(yè)面中定義一個(gè)div元素，在JavaScript中通過(guò)id來(lái)獲取該容器元素，隨后引入Three.js庫(kù)文件，通過(guò)WebGL渲染器來(lái)獲得Canvas的上下文三維繪制場(chǎng)景。我們可以對(duì)renderer的尺寸、顏色等進(jìn)行更加詳細(xì)的設(shè)置，通過(guò)編寫(xiě)initCamera、initScene和initLight三個(gè)函數(shù)實(shí)現(xiàn)相機(jī)、場(chǎng)景和燈光的初始化。

（2）雙節(jié)擺模型初始化設(shè)置

在整個(gè)模型繪制過(guò)程中，其工作主要分為初始化和運(yùn)行兩部分，分別由initObject和loop函數(shù)實(shí)現(xiàn)。我們將雙節(jié)擺系統(tǒng)構(gòu)建成Pendulum對(duì)象，主要包括支點(diǎn)對(duì)象（Cube）、小球?qū)ο螅˙all）、細(xì)桿張力、長(zhǎng)度、夾角余弦、系統(tǒng)能量等屬性。小球?qū)ο蟀膶傩灾饕匈|(zhì)量、坐標(biāo)和速度等，我們給這些屬性設(shè)置一定的初始值，也可通過(guò)前端用戶(hù)輸入獲得。通過(guò)封裝對(duì)象的方式簡(jiǎn)化了調(diào)用過(guò)程，也便于靈活操作其相關(guān)屬性，同時(shí)能夠擴(kuò)展相關(guān)屬性。在創(chuàng)建物體時(shí)，需要傳入兩個(gè)參數(shù)，一個(gè)是形狀（Geometry），本文用到的是立方體和球體，另一個(gè)是材質(zhì)（Material），通過(guò)設(shè)置材質(zhì)可以改變物體的顏色和紋理。

（3）繪制小球運(yùn)動(dòng)軌跡

小球運(yùn)動(dòng)軌跡的繪制主要是通過(guò)不斷更新元素的狀態(tài)位置等來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。設(shè)置一定的時(shí)間間隔，不斷獲取小球的坐標(biāo)，根據(jù)不同位置繪制小球，模擬出小球運(yùn)動(dòng)。通過(guò)編寫(xiě)loop函數(shù)來(lái)實(shí)現(xiàn)該功能，并調(diào)用如下代碼實(shí)現(xiàn)小球的循環(huán)繪制。

window.requestAnimationFrame（） 是由瀏覽器專(zhuān)門(mén)為動(dòng)畫(huà)提供的API，該方法將告知瀏覽器要開(kāi)始動(dòng)畫(huà)效果了，它在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用，并且如果頁(yè)面不是激活狀態(tài)下的話，動(dòng)畫(huà)會(huì)自動(dòng)暫停，有效節(jié)省了CPU開(kāi)銷(xiāo)。使用這個(gè)函數(shù)時(shí)需要在下次動(dòng)畫(huà)前調(diào)用相應(yīng)方法來(lái)更新畫(huà)面，這個(gè)方法就是傳遞給window.requestAnimationFrame的回調(diào)函數(shù)。通過(guò)遞歸調(diào)用同一方法來(lái)不斷更新畫(huà)面以達(dá)到動(dòng)起來(lái)的效果。

在繪制細(xì)桿時(shí)我們使用new THREE.Line（）方法實(shí)時(shí)繪制，另外需要注意的是，在下次繪制之前需要清除本次繪制的細(xì)桿，調(diào)用scene.remove（）方法清除。為了使小球運(yùn)動(dòng)的軌跡更加符合運(yùn)動(dòng)規(guī)律，減小繪制誤差，我們使用標(biāo)準(zhǔn)4級(jí)4階的龍格庫(kù)塔法（Runge–Kutta）[8]對(duì)小球位置和速度的微分方程進(jìn)行高精度求解。

至此，雙節(jié)擺的三維物理模型構(gòu)建完成，我們需要調(diào)用Three.js庫(kù)中的渲染器對(duì)整個(gè)場(chǎng)景和模型進(jìn)行渲染，在渲染之前需要調(diào)用renderer的clear（）方法，來(lái)清除其顏色、深度和模板繪制緩沖區(qū)。隨后該雙節(jié)擺三維物理模型便可在Web上顯示。為了能夠使兩個(gè)細(xì)桿的張力變化可視化，我們通過(guò)引入flotr2.js繪制兩個(gè)細(xì)桿的張力變化曲線圖。Flotr2[9]是HTML5繪制圖表和圖形庫(kù)，它是一個(gè)獨(dú)立框架，可以擴(kuò)展，能夠自定義圖表類(lèi)型，并且支持移動(dòng)設(shè)備顯示。

（4）交互功能實(shí)現(xiàn)

該模型對(duì)交互功能的實(shí)現(xiàn)主要包括三個(gè)方面：首先是參數(shù)的改變，在Web頁(yè)面我們?cè)O(shè)置了可以讓用戶(hù)改變兩個(gè)小球坐標(biāo)位置和質(zhì)量的輸入文本框，用戶(hù)可以輸入不同參數(shù)以觀察不同數(shù)據(jù)下小球運(yùn)動(dòng)的狀態(tài)；其次是監(jiān)聽(tīng)鼠標(biāo)事件，主要包含mousedown、mouseup、mousemove和mousewheel等事件。這些事件是綁定在用于展示三維物理模型的div容器元素上。通過(guò)對(duì)這些事件的監(jiān)聽(tīng)，模擬觀察者，使用戶(hù)能夠?qū)㈦p節(jié)擺模型平移、旋轉(zhuǎn)、縮放，以調(diào)整到自己喜歡和所需的角度或方式觀看三維模型的每個(gè)局部細(xì)節(jié)；最后是數(shù)據(jù)采集和保存。在模型運(yùn)行過(guò)程中，用戶(hù)可以隨時(shí)開(kāi)始和暫停動(dòng)畫(huà)，我們使用的是按鈕形式，有開(kāi)始、暫停、繼續(xù)和輸出四個(gè)按鈕。用戶(hù)可保存任意時(shí)刻采集到的速度、張力和能量等數(shù)據(jù)，該功能利用HTML5新功能實(shí)現(xiàn)。

3.測(cè)試環(huán)境部署和運(yùn)行

基于上述模型實(shí)現(xiàn)關(guān)鍵步驟和技術(shù)，我們實(shí)現(xiàn)了雙節(jié)擺模型的構(gòu)建。接下來(lái)需要對(duì)其進(jìn)行部署和測(cè)試。WebGL對(duì)服務(wù)器端沒(méi)有特殊要求，任意支持HTTP服務(wù)的Web服務(wù)器都可，我們將其配置在tomcat服務(wù)器上，接下來(lái)對(duì)其在不同操作系統(tǒng)、不同終端設(shè)備上進(jìn)行測(cè)試。WebGL對(duì)硬件沒(méi)有太高要求，CPU在1Ghz，內(nèi)存在512MB以上即可。通過(guò)測(cè)試我們發(fā)現(xiàn)該模型可以通過(guò)PC端瀏覽器瀏覽，也可以通過(guò)手機(jī)、平板電腦等瀏覽器瀏覽，動(dòng)畫(huà)效果較為流暢，模型能夠較為真實(shí)地模擬物理運(yùn)動(dòng)規(guī)律（如圖3、圖4、圖5所示）。

五、總結(jié)與展望

1.總結(jié)

本文針對(duì)一般三維圖形渲染過(guò)程中安裝插件的麻煩，提出一種無(wú)插件的渲染方法，采用WebGL技術(shù)，三維模型可直接在瀏覽器端繪制和展現(xiàn)，無(wú)需安裝任何插件。結(jié)合利用HTML5與WebGL相關(guān)技術(shù)，同時(shí)利用Three.js框架，在瀏覽器上構(gòu)建出三維雙節(jié)擺物理模型。通過(guò)測(cè)試實(shí)踐，我們發(fā)現(xiàn)不管在PC端還是移動(dòng)端，該模型三維動(dòng)畫(huà)的實(shí)現(xiàn)都較為流暢，在場(chǎng)景中能很好地通過(guò)鼠標(biāo)或者觸屏對(duì)模型進(jìn)行移動(dòng)、旋轉(zhuǎn)、縮放等操作，從而實(shí)現(xiàn)多角度、細(xì)粒度的與模型進(jìn)行交互，并且該模型能夠進(jìn)行相關(guān)數(shù)據(jù)采集和保存。研究結(jié)果表明，目前的主流瀏覽器都對(duì)WebGL都有較好的支持，這一技術(shù)的出現(xiàn)能夠很好地解決跨平臺(tái)問(wèn)題。我們相信隨著標(biāo)準(zhǔn)的進(jìn)一步完善和相關(guān)技術(shù)的進(jìn)一步推動(dòng)，WebGL技術(shù)在網(wǎng)絡(luò)交互、可視化及虛擬現(xiàn)實(shí)等領(lǐng)域都會(huì)有較大的推廣價(jià)值，基于Web的3D仿真系統(tǒng)必將在商業(yè)、教育等領(lǐng)域有廣闊的應(yīng)用前景。

2.展望

開(kāi)發(fā)基于WebGL的三維物理模型對(duì)開(kāi)發(fā)建設(shè)移動(dòng)學(xué)習(xí)資源的啟示：

（1）開(kāi)發(fā)移動(dòng)學(xué)習(xí)資源是信息技術(shù)與教育教學(xué)深度融合發(fā)展的基本要求

教育信息化的大力發(fā)展，三通兩平臺(tái)的實(shí)現(xiàn)，新技術(shù)新媒體等的發(fā)展，教育信息化將促進(jìn)教育的全面改革，建設(shè)移動(dòng)學(xué)習(xí)新資源能為教師和學(xué)生開(kāi)展移動(dòng)學(xué)習(xí)、泛在學(xué)習(xí)提供可能，能更好的促進(jìn)課堂教學(xué)方式的變革，促進(jìn)學(xué)校的變革，也是促進(jìn)信息技術(shù)與教育教學(xué)深度融合的基本要求。

（2）開(kāi)發(fā)移動(dòng)學(xué)習(xí)資源是變革教與學(xué)方式的基礎(chǔ)

隨著信息技術(shù)的不斷發(fā)展，教與學(xué)也在不斷的發(fā)生變化，移動(dòng)學(xué)習(xí)資源的建設(shè)為開(kāi)展信息化創(chuàng)新教學(xué)提供了有利條件，促進(jìn)學(xué)生的知識(shí)建構(gòu)，是更好地實(shí)施翻轉(zhuǎn)課堂教學(xué)、開(kāi)展創(chuàng)客教育的基礎(chǔ)，也為學(xué)生開(kāi)展泛在學(xué)習(xí)、移動(dòng)學(xué)習(xí)提供方便。

（3）開(kāi)發(fā)移動(dòng)學(xué)習(xí)資源為智慧教育的實(shí)現(xiàn)提供可能

隨著智慧教育的發(fā)展，人們對(duì)新型教與學(xué)資源的智能化需求越來(lái)越高，移動(dòng)學(xué)習(xí)資源的智能化能進(jìn)一步滿(mǎn)足學(xué)生的個(gè)性化學(xué)習(xí)需求，促進(jìn)學(xué)習(xí)者知識(shí)建構(gòu)。建設(shè)新型優(yōu)質(zhì)教與學(xué)資源的共建共享，促進(jìn)優(yōu)質(zhì)教育均衡化發(fā)展，進(jìn)一步促進(jìn)智慧教育的發(fā)展與實(shí)現(xiàn)。

當(dāng)然，利用WebGL技術(shù)開(kāi)發(fā)三維物理模型不是我們最終的目的，如何利用WebGL技術(shù)模擬演示物理現(xiàn)象及原理，將抽象的知識(shí)直觀化、形象化，以激發(fā)學(xué)習(xí)者的學(xué)習(xí)興趣和動(dòng)機(jī)，并通過(guò)良好的交互設(shè)計(jì)來(lái)引導(dǎo)學(xué)習(xí)者進(jìn)行知識(shí)的自我建構(gòu)，能夠給予學(xué)習(xí)者即時(shí)反饋是我們需要深入探究的重要課題。特別是處在移動(dòng)互聯(lián)網(wǎng)時(shí)代，如何利用這些技術(shù)創(chuàng)建出優(yōu)質(zhì)的移動(dòng)學(xué)習(xí)資源，使學(xué)習(xí)者能夠隨時(shí)隨地，更加靈活地利用技術(shù)進(jìn)行學(xué)習(xí)是我們下一步研究的方向。我們有理由相信，隨著技術(shù)的不斷發(fā)展，必將推動(dòng)教育融合創(chuàng)新，使教育更加開(kāi)放靈活。

參考文獻(xiàn)：

[1]艾達(dá)，喬明明，李敏等.Web 3D技術(shù)綜述[J].微型機(jī)與應(yīng)用，2014（2）：4-7.

[2]Wikipedia.WebGL[EB/OL]. http：//en.wikipedia.org /wiki/WebGL.

[3]祝智庭，孫妍妍.無(wú)縫學(xué)習(xí)——數(shù)字化學(xué)習(xí)新常態(tài)[J].開(kāi)放教育研究，2015（1）：11-16.

[4]楊現(xiàn)民，李翼紅.創(chuàng)客教育的價(jià)值潛能及其爭(zhēng)議[J].現(xiàn)代遠(yuǎn)程教育研究，2015（3）：23-34.

[5]Khronos Group[EB/OL].http：//www.khronos.org/webgl.

[6]周敬敬，陳昕等.利用WebGL技術(shù)實(shí)現(xiàn)機(jī)房動(dòng)態(tài)虛擬裝配設(shè)計(jì)的可視化[J].科研信息化技術(shù)與應(yīng)用，2013（2） ：87-92.

[7]況衛(wèi)飛，彭四偉.三維渲染引擎編輯器的研究[J].電子設(shè)計(jì)工程，2009（9） ：91-92.

[8]陳哲.捷聯(lián)慣導(dǎo)系統(tǒng)原理[M].北京：宇航出版社，1986：31-32.

[9]Flotr2 website[EB/OL].http：//www.humblesoftware.com/flotr2/.

（編輯：魯利瑞）