基于HTML5的虚拟实验建模及实现

郝立坤 何小刚

关键词： 虚拟实验; HTML5; 器件建模; 器件关系; 知识库; 过程建模

中图分类号： TN915.5?34; TP391.9                文献标识码： 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  引  言

物理和化學是以实验为基础的学科，实验作为教学的辅助有着重要的作用[1]。传统的实验受时间和地点的限制，资源上也存在一定的短缺[2]。虚拟实验运用虚拟技术模拟真实实验，采用多媒体技术在计算机或移动设备上建立虚拟实验环境，提供可操作的虚拟仪器，学生或教师通过接近真实的人机交互界面完成实验操作[3?4]。虚拟实验室有效地规避了传统实验的缺点，学生可以利用自己的课余时间自由使用，教师能够在课堂上演示危险实验。目前针对虚拟实验的研究有很多，常用的开发技术也不少。

FLASH能实现丰富的动画效果，开发难度低，利用ActionScript脚本能实现较强的交互性，很多虚拟实验都采用这种技术开发[5?6]。用FLASH开发虚拟实验的不足之处是开发过程中每个实验相互独立，相同的素材需要多次导入，代码重复率高，降低了效率。

基于3D和 Virtools技术设计可以实现具有复杂交互功能物理虚拟实验，其开发难度小，但是客户端使用时需要安装插件。

此外，VRML，Java，Matlab，LabVIEW[7]，OpenGL等技术或工具也常用于虚拟实验的开发，利用这些技术或工具开发的虚拟实验难以同时满足真实形象美观、交互性强、开发难度低三方面主要需求。

近年来发展迅速的第五代超文本标记语言HTML5技术可同时满足这些需求，开发出的虚拟实验基于浏览器运行，不需安装插件。因此采用HTML5技术，利用器件建模和过程建模的方式进行中学物理化学虚拟实验的开发。

1  虚拟实验功能设计与实验开发流程

1.1  虚拟实验功能设计

虚拟实验整体含有4部分内容：实验目的、实验说明、实验演示和实验操作。实验目的介绍了做此实验预期达到的目标效果;实验说明表述实验过程的注意事项、实验的特殊要求等;实验演示采用动画演示和真人讲解的方式介绍实验原理知识和具体操作步骤。虚拟实验包含了器材、步骤、操作、数据记录、测评等内容[8]。实验整体部分的功能结构图如图1所示。

1.2  虚拟实验功能设计

虚拟实验的设计流程如图2所示。

1） 实验器件建模。器件建模分两步实现：几何建模和物理特性建模。几何建模建立器件的几何模型，制作实验所需素材;物理特性建模建立器件的属性和行为模型。

2） 创建实验场景。在实验场景中添加实验名称等内容，添加实验器件。

3） 实验过程建模。建立器件间的关系，在关系建立的基础上建立过程模型，完成交互设计。

4） 添加实验测评。针对实验涉及知识点设置得分点，评判用户的实验操作、记录的数据和结论。

5） 实验发布。实验开发完成，经过调试和优化，确认没有问题并且达到预期效果后，发布HTML5。

2  虚拟实验的实现

2.1  虚拟实验功能设计

虚拟实验器件是虚拟实验的基础，能够影响用户对实验的体验效果和实验的运行效果，因此虚拟实验器件的可视化模型要具有真实性、美观性[9];除此之外，还应具有复用性、可扩展性和良好的交互性，能够使得器件在多个实验中使用，避免器件的重复建模，提高效率，同时提升实验的可操作性，给人身在其中的感觉。针对这些特性，将虚拟实验器件建模分为几何建模和物理特性建模两部分。

2.1.1  器件几何建模

目前很多游戏都采用3D效果呈现，拥有良好的体验效果。以往的虚拟实验也有采用3D软件制作的，但是利用3D技术制作的虚拟实验器件资源加载速度慢，运行时会给硬件带来巨大性能损耗，有些用户的设备配置较低，丢帧的情况会影响实验的正常运行。因此本虚拟实验系统采用3D模型渲染的2.5D图形，兼顾了性能和体验，能够适应广泛的用户环境。

采用犀牛建模软件对现实中的实验器件绘制3D模型，将真实世界器件的外形抽象出来建立到虚拟世界中。在建立三维模型时，为了保证器件的真实性，基本保持了器件实物各部分比例和器件之间的比例。三维模型建立好以后选取适于操作和观察的角度用Keyshot插件渲染得到2.5D图形，如有特殊情况，用Photoshop软件修改处理。由于很多实验器件由多个部件构成，建立三维模型时单独建立然后组合成一个整体。为了方便后续的交互设计，导出时将器件的各个部分分别导出。

2.1.2  器件物理特性建模

器件的物理特性建模是器件属性和行为的建模。属性建模表征了器件的特性，行为建模赋予了器件与生俱来的行为和反应能力。器件的基本属性有类别、状态等，基本行为有拖动、旋转等。

物理特性的建模包括后续的工作在开发环境里面完成。系统采用了一款HTML5游戏引擎：Egret引擎进行实验的开发。Egret引擎解决了HTML5性能问题及碎片化問题，灵活地满足了开发者开发需求，并有着极强的跨平台运行能力。Egret采用JavaScript的超集TypeScript作为开发语言。在引擎的集成开发环境Egret Wing内创建一个器件通用类，新建属性和方法，属性表示器件属性，方法表示器件行为。基本行为建模如下：

1） 器件的拖动

采用事件侦听的方式通过计算鼠标和器件的偏移量实现器件拖动。器件注册侦听器开启侦听后，鼠标按下时，TOUCH_BEGIN事件处理函数计算当前鼠标和器件的偏移量：

this.distance.x = evt.stageX ? this.x;// x轴上的偏移量=鼠标                                           当前的x轴坐标-器件的x轴坐标

this.distance.y = evt.stageY ? this.y;//y轴上的偏移量=鼠标当

前的y轴坐标?器件的y轴坐标

移动鼠标时，TOUCH_MOVE事件处理函数计算器件的实时距离：

this.x = evt.stageX ? this.distance.x;                    //x轴坐标

this.y = evt.stageY ? this.distance.y;                    //y轴坐标

鼠标松开时，TOUCH_END事件处理函数移除上述侦听。

2） 器件的旋转

物体是围着旋转中心旋转的，因此需要设置旋转中心。在Egret中，每一个显示对象都有一个锚点。锚点默认是原点，即器件的左上角，旋转时器件围绕锚点旋转。对于一般的容器，旋转中心不需要改变。在一些特殊情况下需要改变锚点相对于显示对象的位置，比如天平指针在旋转时围绕指针底部的中心点旋转，这就需要修改锚点的位置为指针底部中央。为了方便操作，在需要用户操作的器件右下角添加旋转按钮，鼠标拖动旋转按钮实现旋转。同拖动一样，旋转采用计算角度偏移量的方式实现，关键代码为：

var rotation： number = （Math.atan （（ evt.stageY ? this.y） / （evt.stageX ? this.x ）） * 180） / Math.PI;   //旋转角度的计算公式

在对一个具体的器件进行物理特性建模时，继承通用器件类，建立自己的器件类，导入器件素材，调整各部分显示位置，新增自己的属性和方法。比如量筒新增量程属性、电阻新增阻值属性、蜡烛新增点燃和熄灭的方法等。通用类的属性和方法针对器件共性之处设置，但不代表所有器件都会使用，有些器件在实验过程中不需要旋转，可以不调用器件通用类的旋转方法。

2.2  创建实验场景

实验场景是实验操作的舞台。定义实验场景通用类。在场景通用类中，新建实验名称、实验时间、实验记录、实验总分和实验步骤等共同内容的显示方法[10]。每个实验继承实验场景通用类，创建自己的场景，添加实验名称等具体内容。

在场景中，首要的是添加实验器件。创建的器件需要添加到舞台上相互之间才能作用。有些化学实验的器件较多，全部放在舞台上会占用过多的操作空间。针对这一问题，在场景的左上角设置滑动窗口作为器件区存放器件，未使用或使用完的器件可以放回器件区。窗口采用九宫格的形式，每个格子内存放一种器件。当器件从器件区拖出后，器件添加到实验场景里面，器件库内器件的数量减一。

器件添加方法如下：

public cancle： Candle;

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

this.candle = new Candle（x，y）;     //实例化对象，this指场景

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

}

当器件拖动到九宫格范围内放回时，场景移除器件this.removeChild（this.candle），器件库内器件数量增加。

2.3  实验过程建模

实验过程是实验的灵魂。在虚拟实验中，仅有实验器件一个个单独的个体，不建立器件间的关系和相互作用的过程，无法进行虚拟实验操作，这就需要建立器件关系、建立实验过程模型。

2.3.1  器件关系建模

实验是不同的器件按照一定的关系相互作用，通过信息的传递来完成的。关系其实是完成某个功能器件的范畴。器件之间建立关系，才能相互作用，进行信息的传递。因此，器件关系模型的建立是构建虚拟实验的基础，是器件之间相互作用产生实验现象完成实验的前提。器件之间的关系有两种，一种是接触式关系，一种是非接触式关系。建立接触式关系的器件彼此之间固定在一起，可以一起移动，如铁架台和石棉网、试管和试管夹。建立非接触式关系的器件彼此之间不固定，可以隔空响应，如滴管和燒杯，蜡烛和平面镜。器件在相互作用之前，建立关系，相互作用完成，解除关系。不论是关系的建立还是解除，也不论是哪一种关系，都离不开感应机制。通过设置感应点和感应区域，判断二者的位置关系实现器件关系的建立和解除。

感应区域是器件上的一块或者多块区域，感应点是器件上的一个点。不同的器件，相互作用的具体位置不同，所以感应区域和感应点的位置也不同。感应区域在被作用对象上，感应点在作用对象上，分属于两个器件上的感应区域和感应点处于相互对应的关系。当鼠标拖动器件移动，感应点位于另一器件的感应区域内时，对二者进行从属关系判断，满足条件，建立关系，并锁定在一起。当鼠标拖动器件使感应点离开感应区域，取消锁定，关系解除。感应区域大小要设置恰当，既要满足判断需要又要防止其余器件误判。

2.3.2  实验过程建模

实验过程是器件相互作用的过程。在真实世界中，器件间的相互作用遵循一定的原理或物理规律。在虚拟环境中模拟真实实验过程需要将这些原理规律抽象出来，建立模型，使虚拟实验的过程更真实、更自然。

虚拟实验中典型的过程模型有很多，比如电学模型、力学模型、光学模型和化学反应模型等。电学模型的核心是电路算法的实现，采用节点电压法建立电路方程求解各支路的电流和电压。力学模型的核心是牛顿运动定律，根据运动规律设计展现物体的运动状态。光学模型的核心是光的直线传播与反射和折射。化学反应模型与前面的几种模型有所不同，涉及到的不是物理规律，而是化学反应规律，根据化学反应方程式进行化学计算，产生实验现象。

化学实验反应模型根据输入的反应物和反应条件利用化学方程式计算反应物的物质的量，并产生相应的实验现象。建模过程主要包括化学知识库的建立、化学方程式的获取、物质的量的计算和实验现象的实现。知识库包含三个方面：化学药品知识库、化学方程式知识库和实验现象知识库。药品知识库记录药品的状态、化学式、物质的量、熔沸点等信息，方程式知识库记录反应物和生成物及其系数、反应条件和反应速率，现象知识库记录反应生成的沉淀、气泡等信息。参与反应的反应物在向容器添加药品时确定，确定之后匹配方程式库中的反应物，匹配成功按照方程式的信息计算生成物的物质的量，产生相应的现象。反应过程的模型如图3所示。

2.4  实验测评

实验测评是系统对用户操作的响应和回馈，判断用户是否熟悉基本操作，是否掌握实验蕴含的知识原理。实验测评主要有两个功能：基于实验过程和步骤判断用户的操作是否正确;判断用户记录的实验数据和实验结论是否正确。

虚拟实验依据上述两方面设置关键得分点，并设置得分点的标志位。标志位的状态表征该点是否得分，默认状态是0，若该点得分，状态修改为1。

操作判断设置在器件的动作中，采用事件机制实现器件与标志位的信息传递。若操作正确，器件或场景发送事件消息;在测评模块，器件或场景侦听到已发送的消息，修改标志位状态。实验数据或实验结论由用户在文本框内输入，测评模块获取用户的输入内容，与标准答案的正则表达式匹配，匹配成功，修改标志位状态。测评模块根据各知识点标志位的状态在进入下一步时完成上一步的评判，给出实验得分。用户可以查看知识点评分细则，在已进行操作但未得分的知识点下方显示相应提示，方便用户了解自己对实验内容的掌握情况，纠正存在的错误。

2.5  实验发布

实验基本设计完成后，进行实验测试，针对存在的问题和不足进行调试和优化，达到预期效果后，利用发布HTML5功能发布实验。完成的固体物质鉴别实验如图4所示。

3  结  语

本文介绍虚拟实验系统的功能，采用HTML5技术，利用器件建模和过程建模的方法开发完成了具有测评功能的中学物理化学虚拟实验。虚拟实验借助游戏引擎进行开发，器件操作性强，交互性高;无需安装客户端和插件，可在多种终端的浏览器上使用，具有很强的跨平台能力。采用HTML5技术开发难度低，易实现，为虚拟实验的开发提供了一种新的方式，对多媒体课件起到了借鉴作用，应用前景广阔。

参考文献

[1] 宋倩雯.高中化学演示实验教学现状调查与优化策略研究[D].武汉：华中师范大学，2016.

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

[2] 张学军，唐久磊，魏江明.基于Flash3D的中学化学虚拟实验平台的设计与实现[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] 黄璐，章苏静.基于整合情境的游戏化虚拟实验的设计研究[J].现代教育技术，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] 陈润，孙界平，琚生根，等.构建计算机虚拟实验教学质量保障体系[J].实验技术与管理，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] 王学严，张茹，张虎，等.大学物理虚拟实验一体化设计与实例[J].实验技术与管理，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] 张林誉.初中物理虚拟实验系统的设计与实现[D].武汉：华中师范大学，2013.

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

[7] 齐超，张磊，张渤晗，等.基于LabVIEW的暂态电路虚拟实验分析[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] 李凌云.理论力学虚拟实验与课程管理平台的实现[J].实验技术与管理，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] 刘丽，潘荣江.虚拟实验构件的建模方法[J].中国科技论文，2012，7（4）：308?311.

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

[10] 吕浩.中学化学虚拟实验室的构建及实现[D].长春：东北师范大学，2013.

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