郝立坤 何小剛

關(guān)鍵詞： 虛擬實驗; HTML5; 器件建模; 器件關(guān)系; 知識庫; 過程建模

中圖分類號： TN915.5?34; TP391.9 ? ? ? ? ? ? ? ?文獻標(biāo)識碼： A ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2018）24?0066?05

Modeling and implementation of virtual experiment based on HTML5

HAO Likun， HE Xiaogang

（School of Information Engineering， Taiyuan University of Technology， Jinzhong 030600， China）

Abstract： Since the virtue laboratory can effectively avoid the disadvantages of the traditional laboratory， has broken through time and space constraints， and both students and teachers are free to access the experimental operating instrument， the HTML5 technology is applied to develop and realize the virtual experiment for physics and chemistry courses of middle schools. In the virtual experiment， the methods of geometric modeling and physical feature modeling are adopted to establish the device model and add it in the experimental scene. The process modeling is realized， interactive design is completed， and experimental operation and data conclusions are evaluated based on the establishment of device relationships. The results show that the virtual experiment developed and completed on the basis of HTML5 has strong interactivity and high simulation degree while running on browsers.

Keywords： virtual experiment; HTML5; device modeling; device relationship; knowledge base; process modeling

0 ?引 ?言

物理和化學(xué)是以實驗為基礎(chǔ)的學(xué)科，實驗作為教學(xué)的輔助有著重要的作用[1]。傳統(tǒng)的實驗受時間和地點的限制，資源上也存在一定的短缺[2]。虛擬實驗運用虛擬技術(shù)模擬真實實驗，采用多媒體技術(shù)在計算機或移動設(shè)備上建立虛擬實驗環(huán)境，提供可操作的虛擬儀器，學(xué)生或教師通過接近真實的人機交互界面完成實驗操作[3?4]。虛擬實驗室有效地規(guī)避了傳統(tǒng)實驗的缺點，學(xué)生可以利用自己的課余時間自由使用，教師能夠在課堂上演示危險實驗。目前針對虛擬實驗的研究有很多，常用的開發(fā)技術(shù)也不少。

FLASH能實現(xiàn)豐富的動畫效果，開發(fā)難度低，利用ActionScript腳本能實現(xiàn)較強的交互性，很多虛擬實驗都采用這種技術(shù)開發(fā)[5?6]。用FLASH開發(fā)虛擬實驗的不足之處是開發(fā)過程中每個實驗相互獨立，相同的素材需要多次導(dǎo)入，代碼重復(fù)率高，降低了效率。

基于3D和 Virtools技術(shù)設(shè)計可以實現(xiàn)具有復(fù)雜交互功能物理虛擬實驗，其開發(fā)難度小，但是客戶端使用時需要安裝插件。

此外，VRML，Java，Matlab，LabVIEW[7]，OpenGL等技術(shù)或工具也常用于虛擬實驗的開發(fā)，利用這些技術(shù)或工具開發(fā)的虛擬實驗難以同時滿足真實形象美觀、交互性強、開發(fā)難度低三方面主要需求。

近年來發(fā)展迅速的第五代超文本標(biāo)記語言HTML5技術(shù)可同時滿足這些需求，開發(fā)出的虛擬實驗基于瀏覽器運行，不需安裝插件。因此采用HTML5技術(shù)，利用器件建模和過程建模的方式進行中學(xué)物理化學(xué)虛擬實驗的開發(fā)。

1 ?虛擬實驗功能設(shè)計與實驗開發(fā)流程

1.1 ?虛擬實驗功能設(shè)計

虛擬實驗整體含有4部分內(nèi)容：實驗?zāi)康?、實驗說明、實驗演示和實驗操作。實驗?zāi)康慕榻B了做此實驗預(yù)期達到的目標(biāo)效果;實驗說明表述實驗過程的注意事項、實驗的特殊要求等;實驗演示采用動畫演示和真人講解的方式介紹實驗原理知識和具體操作步驟。虛擬實驗包含了器材、步驟、操作、數(shù)據(jù)記錄、測評等內(nèi)容[8]。實驗整體部分的功能結(jié)構(gòu)圖如圖1所示。

1.2 ?虛擬實驗功能設(shè)計

虛擬實驗的設(shè)計流程如圖2所示。

1） 實驗器件建模。器件建模分兩步實現(xiàn)：幾何建模和物理特性建模。幾何建模建立器件的幾何模型，制作實驗所需素材;物理特性建模建立器件的屬性和行為模型。

2） 創(chuàng)建實驗場景。在實驗場景中添加實驗名稱等內(nèi)容，添加實驗器件。

3） 實驗過程建模。建立器件間的關(guān)系，在關(guān)系建立的基礎(chǔ)上建立過程模型，完成交互設(shè)計。

4） 添加實驗測評。針對實驗涉及知識點設(shè)置得分點，評判用戶的實驗操作、記錄的數(shù)據(jù)和結(jié)論。

5） 實驗發(fā)布。實驗開發(fā)完成，經(jīng)過調(diào)試和優(yōu)化，確認沒有問題并且達到預(yù)期效果后，發(fā)布HTML5。

2 ?虛擬實驗的實現(xiàn)

2.1 ?虛擬實驗功能設(shè)計

虛擬實驗器件是虛擬實驗的基礎(chǔ)，能夠影響用戶對實驗的體驗效果和實驗的運行效果，因此虛擬實驗器件的可視化模型要具有真實性、美觀性[9];除此之外，還應(yīng)具有復(fù)用性、可擴展性和良好的交互性，能夠使得器件在多個實驗中使用，避免器件的重復(fù)建模，提高效率，同時提升實驗的可操作性，給人身在其中的感覺。針對這些特性，將虛擬實驗器件建模分為幾何建模和物理特性建模兩部分。

2.1.1 ?器件幾何建模

目前很多游戲都采用3D效果呈現(xiàn)，擁有良好的體驗效果。以往的虛擬實驗也有采用3D軟件制作的，但是利用3D技術(shù)制作的虛擬實驗器件資源加載速度慢，運行時會給硬件帶來巨大性能損耗，有些用戶的設(shè)備配置較低，丟幀的情況會影響實驗的正常運行。因此本虛擬實驗系統(tǒng)采用3D模型渲染的2.5D圖形，兼顧了性能和體驗，能夠適應(yīng)廣泛的用戶環(huán)境。

采用犀牛建模軟件對現(xiàn)實中的實驗器件繪制3D模型，將真實世界器件的外形抽象出來建立到虛擬世界中。在建立三維模型時，為了保證器件的真實性，基本保持了器件實物各部分比例和器件之間的比例。三維模型建立好以后選取適于操作和觀察的角度用Keyshot插件渲染得到2.5D圖形，如有特殊情況，用Photoshop軟件修改處理。由于很多實驗器件由多個部件構(gòu)成，建立三維模型時單獨建立然后組合成一個整體。為了方便后續(xù)的交互設(shè)計，導(dǎo)出時將器件的各個部分分別導(dǎo)出。

2.1.2 ?器件物理特性建模

器件的物理特性建模是器件屬性和行為的建模。屬性建模表征了器件的特性，行為建模賦予了器件與生俱來的行為和反應(yīng)能力。器件的基本屬性有類別、狀態(tài)等，基本行為有拖動、旋轉(zhuǎn)等。

物理特性的建模包括后續(xù)的工作在開發(fā)環(huán)境里面完成。系統(tǒng)采用了一款HTML5游戲引擎：Egret引擎進行實驗的開發(fā)。Egret引擎解決了HTML5性能問題及碎片化問題，靈活地滿足了開發(fā)者開發(fā)需求，并有著極強的跨平臺運行能力。Egret采用JavaScript的超集TypeScript作為開發(fā)語言。在引擎的集成開發(fā)環(huán)境Egret Wing內(nèi)創(chuàng)建一個器件通用類，新建屬性和方法，屬性表示器件屬性，方法表示器件行為?；拘袨榻Ｈ缦拢?/p>

1） 器件的拖動

采用事件偵聽的方式通過計算鼠標(biāo)和器件的偏移量實現(xiàn)器件拖動。器件注冊偵聽器開啟偵聽后，鼠標(biāo)按下時，TOUCH_BEGIN事件處理函數(shù)計算當(dāng)前鼠標(biāo)和器件的偏移量：

this.distance.x = evt.stageX ? this.x;// x軸上的偏移量=鼠標(biāo) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)前的x軸坐標(biāo)-器件的x軸坐標(biāo)

this.distance.y = evt.stageY ? this.y;//y軸上的偏移量=鼠標(biāo)當(dāng)

前的y軸坐標(biāo)?器件的y軸坐標(biāo)

移動鼠標(biāo)時，TOUCH_MOVE事件處理函數(shù)計算器件的實時距離：

this.x = evt.stageX ? this.distance.x; ? ? ? ? ? ? ? ? ? ?//x軸坐標(biāo)

this.y = evt.stageY ? this.distance.y; ? ? ? ? ? ? ? ? ? ?//y軸坐標(biāo)

鼠標(biāo)松開時，TOUCH_END事件處理函數(shù)移除上述偵聽。

2） 器件的旋轉(zhuǎn)

物體是圍著旋轉(zhuǎn)中心旋轉(zhuǎn)的，因此需要設(shè)置旋轉(zhuǎn)中心。在Egret中，每一個顯示對象都有一個錨點。錨點默認是原點，即器件的左上角，旋轉(zhuǎn)時器件圍繞錨點旋轉(zhuǎn)。對于一般的容器，旋轉(zhuǎn)中心不需要改變。在一些特殊情況下需要改變錨點相對于顯示對象的位置，比如天平指針在旋轉(zhuǎn)時圍繞指針底部的中心點旋轉(zhuǎn)，這就需要修改錨點的位置為指針底部中央。為了方便操作，在需要用戶操作的器件右下角添加旋轉(zhuǎn)按鈕，鼠標(biāo)拖動旋轉(zhuǎn)按鈕實現(xiàn)旋轉(zhuǎn)。同拖動一樣，旋轉(zhuǎn)采用計算角度偏移量的方式實現(xiàn)，關(guān)鍵代碼為：

var rotation： number = （Math.atan （（ evt.stageY ? this.y） / （evt.stageX ? this.x ）） * 180） / Math.PI; ? //旋轉(zhuǎn)角度的計算公式

在對一個具體的器件進行物理特性建模時，繼承通用器件類，建立自己的器件類，導(dǎo)入器件素材，調(diào)整各部分顯示位置，新增自己的屬性和方法。比如量筒新增量程屬性、電阻新增阻值屬性、蠟燭新增點燃和熄滅的方法等。通用類的屬性和方法針對器件共性之處設(shè)置，但不代表所有器件都會使用，有些器件在實驗過程中不需要旋轉(zhuǎn)，可以不調(diào)用器件通用類的旋轉(zhuǎn)方法。

2.2 ?創(chuàng)建實驗場景

實驗場景是實驗操作的舞臺。定義實驗場景通用類。在場景通用類中，新建實驗名稱、實驗時間、實驗記錄、實驗總分和實驗步驟等共同內(nèi)容的顯示方法[10]。每個實驗繼承實驗場景通用類，創(chuàng)建自己的場景，添加實驗名稱等具體內(nèi)容。

在場景中，首要的是添加實驗器件。創(chuàng)建的器件需要添加到舞臺上相互之間才能作用。有些化學(xué)實驗的器件較多，全部放在舞臺上會占用過多的操作空間。針對這一問題，在場景的左上角設(shè)置滑動窗口作為器件區(qū)存放器件，未使用或使用完的器件可以放回器件區(qū)。窗口采用九宮格的形式，每個格子內(nèi)存放一種器件。當(dāng)器件從器件區(qū)拖出后，器件添加到實驗場景里面，器件庫內(nèi)器件的數(shù)量減一。

器件添加方法如下：

public cancle： Candle;

public addCandle （x： number， y： number） {

this.candle = new Candle（x，y）; ? ? //實例化對象，this指場景

this.addChild（this.candle）; ? ? ? ? ? ? ? ? ? ? ? ? ?//添加到場景

}

當(dāng)器件拖動到九宮格范圍內(nèi)放回時，場景移除器件this.removeChild（this.candle），器件庫內(nèi)器件數(shù)量增加。

2.3 ?實驗過程建模

實驗過程是實驗的靈魂。在虛擬實驗中，僅有實驗器件一個個單獨的個體，不建立器件間的關(guān)系和相互作用的過程，無法進行虛擬實驗操作，這就需要建立器件關(guān)系、建立實驗過程模型。

2.3.1 ?器件關(guān)系建模

實驗是不同的器件按照一定的關(guān)系相互作用，通過信息的傳遞來完成的。關(guān)系其實是完成某個功能器件的范疇。器件之間建立關(guān)系，才能相互作用，進行信息的傳遞。因此，器件關(guān)系模型的建立是構(gòu)建虛擬實驗的基礎(chǔ)，是器件之間相互作用產(chǎn)生實驗現(xiàn)象完成實驗的前提。器件之間的關(guān)系有兩種，一種是接觸式關(guān)系，一種是非接觸式關(guān)系。建立接觸式關(guān)系的器件彼此之間固定在一起，可以一起移動，如鐵架臺和石棉網(wǎng)、試管和試管夾。建立非接觸式關(guān)系的器件彼此之間不固定，可以隔空響應(yīng)，如滴管和燒杯，蠟燭和平面鏡。器件在相互作用之前，建立關(guān)系，相互作用完成，解除關(guān)系。不論是關(guān)系的建立還是解除，也不論是哪一種關(guān)系，都離不開感應(yīng)機制。通過設(shè)置感應(yīng)點和感應(yīng)區(qū)域，判斷二者的位置關(guān)系實現(xiàn)器件關(guān)系的建立和解除。

感應(yīng)區(qū)域是器件上的一塊或者多塊區(qū)域，感應(yīng)點是器件上的一個點。不同的器件，相互作用的具體位置不同，所以感應(yīng)區(qū)域和感應(yīng)點的位置也不同。感應(yīng)區(qū)域在被作用對象上，感應(yīng)點在作用對象上，分屬于兩個器件上的感應(yīng)區(qū)域和感應(yīng)點處于相互對應(yīng)的關(guān)系。當(dāng)鼠標(biāo)拖動器件移動，感應(yīng)點位于另一器件的感應(yīng)區(qū)域內(nèi)時，對二者進行從屬關(guān)系判斷，滿足條件，建立關(guān)系，并鎖定在一起。當(dāng)鼠標(biāo)拖動器件使感應(yīng)點離開感應(yīng)區(qū)域，取消鎖定，關(guān)系解除。感應(yīng)區(qū)域大小要設(shè)置恰當(dāng)，既要滿足判斷需要又要防止其余器件誤判。

2.3.2 ?實驗過程建模

實驗過程是器件相互作用的過程。在真實世界中，器件間的相互作用遵循一定的原理或物理規(guī)律。在虛擬環(huán)境中模擬真實實驗過程需要將這些原理規(guī)律抽象出來，建立模型，使虛擬實驗的過程更真實、更自然。

虛擬實驗中典型的過程模型有很多，比如電學(xué)模型、力學(xué)模型、光學(xué)模型和化學(xué)反應(yīng)模型等。電學(xué)模型的核心是電路算法的實現(xiàn)，采用節(jié)點電壓法建立電路方程求解各支路的電流和電壓。力學(xué)模型的核心是牛頓運動定律，根據(jù)運動規(guī)律設(shè)計展現(xiàn)物體的運動狀態(tài)。光學(xué)模型的核心是光的直線傳播與反射和折射。化學(xué)反應(yīng)模型與前面的幾種模型有所不同，涉及到的不是物理規(guī)律，而是化學(xué)反應(yīng)規(guī)律，根據(jù)化學(xué)反應(yīng)方程式進行化學(xué)計算，產(chǎn)生實驗現(xiàn)象。

化學(xué)實驗反應(yīng)模型根據(jù)輸入的反應(yīng)物和反應(yīng)條件利用化學(xué)方程式計算反應(yīng)物的物質(zhì)的量，并產(chǎn)生相應(yīng)的實驗現(xiàn)象。建模過程主要包括化學(xué)知識庫的建立、化學(xué)方程式的獲取、物質(zhì)的量的計算和實驗現(xiàn)象的實現(xiàn)。知識庫包含三個方面：化學(xué)藥品知識庫、化學(xué)方程式知識庫和實驗現(xiàn)象知識庫。藥品知識庫記錄藥品的狀態(tài)、化學(xué)式、物質(zhì)的量、熔沸點等信息，方程式知識庫記錄反應(yīng)物和生成物及其系數(shù)、反應(yīng)條件和反應(yīng)速率，現(xiàn)象知識庫記錄反應(yīng)生成的沉淀、氣泡等信息。參與反應(yīng)的反應(yīng)物在向容器添加藥品時確定，確定之后匹配方程式庫中的反應(yīng)物，匹配成功按照方程式的信息計算生成物的物質(zhì)的量，產(chǎn)生相應(yīng)的現(xiàn)象。反應(yīng)過程的模型如圖3所示。

2.4 ?實驗測評

實驗測評是系統(tǒng)對用戶操作的響應(yīng)和回饋，判斷用戶是否熟悉基本操作，是否掌握實驗蘊含的知識原理。實驗測評主要有兩個功能：基于實驗過程和步驟判斷用戶的操作是否正確;判斷用戶記錄的實驗數(shù)據(jù)和實驗結(jié)論是否正確。

虛擬實驗依據(jù)上述兩方面設(shè)置關(guān)鍵得分點，并設(shè)置得分點的標(biāo)志位。標(biāo)志位的狀態(tài)表征該點是否得分，默認狀態(tài)是0，若該點得分，狀態(tài)修改為1。

操作判斷設(shè)置在器件的動作中，采用事件機制實現(xiàn)器件與標(biāo)志位的信息傳遞。若操作正確，器件或場景發(fā)送事件消息;在測評模塊，器件或場景偵聽到已發(fā)送的消息，修改標(biāo)志位狀態(tài)。實驗數(shù)據(jù)或?qū)嶒灲Y(jié)論由用戶在文本框內(nèi)輸入，測評模塊獲取用戶的輸入內(nèi)容，與標(biāo)準答案的正則表達式匹配，匹配成功，修改標(biāo)志位狀態(tài)。測評模塊根據(jù)各知識點標(biāo)志位的狀態(tài)在進入下一步時完成上一步的評判，給出實驗得分。用戶可以查看知識點評分細則，在已進行操作但未得分的知識點下方顯示相應(yīng)提示，方便用戶了解自己對實驗內(nèi)容的掌握情況，糾正存在的錯誤。

2.5 ?實驗發(fā)布

實驗基本設(shè)計完成后，進行實驗測試，針對存在的問題和不足進行調(diào)試和優(yōu)化，達到預(yù)期效果后，利用發(fā)布HTML5功能發(fā)布實驗。完成的固體物質(zhì)鑒別實驗如圖4所示。

3 ?結(jié) ?語

本文介紹虛擬實驗系統(tǒng)的功能，采用HTML5技術(shù)，利用器件建模和過程建模的方法開發(fā)完成了具有測評功能的中學(xué)物理化學(xué)虛擬實驗。虛擬實驗借助游戲引擎進行開發(fā)，器件操作性強，交互性高;無需安裝客戶端和插件，可在多種終端的瀏覽器上使用，具有很強的跨平臺能力。采用HTML5技術(shù)開發(fā)難度低，易實現(xiàn)，為虛擬實驗的開發(fā)提供了一種新的方式，對多媒體課件起到了借鑒作用，應(yīng)用前景廣闊。

參考文獻

[1] 宋倩雯.高中化學(xué)演示實驗教學(xué)現(xiàn)狀調(diào)查與優(yōu)化策略研究[D].武漢：華中師范大學(xué)，2016.

SONG Qianwen. The optimization tactics of the high school chemistry demonstration experiment teaching research [D]. Wuhan： Central China Normal University， 2016.

[2] 張學(xué)軍，唐久磊，魏江明.基于Flash3D的中學(xué)化學(xué)虛擬實驗平臺的設(shè)計與實現(xiàn)[J].電化教育研究，2014，35（1）：79?84.

ZHANG Xuejun， TANG Jiulei， WEI Jiangming. Design and implementation of middle school chemistry virtual experiment platform based on Flash3D [J]. E?education research， 2014， 35（1）： 79?84.

[3] 黃璐，章蘇靜.基于整合情境的游戲化虛擬實驗的設(shè)計研究[J].現(xiàn)代教育技術(shù)，2013，23（11）：109?114.

HUANG Lu， ZHANG Sujing. The design of the gamification virtual experiment based on situation integration [J]. Modern educational technology， 2013， 23（11）： 109?114.

[4] 陳潤，孫界平，琚生根，等.構(gòu)建計算機虛擬實驗教學(xué)質(zhì)量保障體系[J].實驗技術(shù)與管理，2017，34（8）：107?110.

CHEN Run， SUN Jieping， JU Shenggen， et al. Construction on quality assurance system of computer virtual experimental teaching [J]. Experimental technology and management， 2017， 34（8）： 107?110.

[5] 王學(xué)嚴，張茹，張虎，等.大學(xué)物理虛擬實驗一體化設(shè)計與實例[J].實驗技術(shù)與管理，2015，32（9）：124?127.

WANG Xueyan， ZHANG Ru， ZHANG Hu， et al. Design of virtual university physics experiment characterized by "all in one" and its example [J]. Experimental technology and management， 2015， 32（9）： 124?127.

[6] 張林譽.初中物理虛擬實驗系統(tǒng)的設(shè)計與實現(xiàn)[D].武漢：華中師范大學(xué)，2013.

ZHANG Linyu. The design and implementation of junior high school physical virtual experiment system [D]. Wuhan： Central China Normal University， 2013.

[7] 齊超，張磊，張渤晗，等.基于LabVIEW的暫態(tài)電路虛擬實驗分析[J].電測與儀表，2016，53（7）：39?44.

QI Chao， ZHANG Lei， ZHANG Bohan， et al. Virtual experimental analysis of the transient circuit based on LabVIEW [J]. Electrical measurement & instrumentation， 2016， 53（7）： 39?44.

[8] 李凌云.理論力學(xué)虛擬實驗與課程管理平臺的實現(xiàn)[J].實驗技術(shù)與管理，2015，32（12）：127?130.

LI Lingyun. Realization of virtual experiment and curriculum management platform of theoretical mechanics [J]. Experimental technology and management， 2015， 32（12）： 127?130.

[9] 劉麗，潘榮江.虛擬實驗構(gòu)件的建模方法[J].中國科技論文，2012，7（4）：308?311.

LIU Li， PAN Rongjiang. Modeling of virtual experiment components [J]. China sciencepaper， 2012， 7（4）： 308?311.

[10] 呂浩.中學(xué)化學(xué)虛擬實驗室的構(gòu)建及實現(xiàn)[D].長春：東北師范大學(xué)，2013.

L? Hao. The construction and implementation of middle school chemistry virtual laboratory [D]. Changchun： Northeast Normal University， 2013.