摘 要

近年来，随着通讯技术、计算机技术以及Web技术的迅猛发展，涌现出很多基于Web的远程实验室，这些远程实验室是实体实验室的一种补充。网络化控制系统实验室NCSLab很好地实现了远程实验的目的，能够远程控制和实时监控实验设备，并利用Flash技术，实现了控制设备的三维界面显示，能够实时反应控制设备的运行情况，并可多角度全方位观察。

本文所采用的虚拟现实界面的实现技术，是基于HTML5的三维界面的实现方法，结合了自动控制实验的水箱、球杆系统等经典设备，较现有的Flash 3D技术而言，实现起来更容易，运行时不需要安装Flash插件，且真实性和流畅性较高。

设计结果表明，将现有自动控制系统的虚拟仿真三维界面移植到HTML5环境下，能够实现NCSLab的无插件运行。

关键字：NSCLab；虚拟现实界面；HTML5；自动控制实验

Abstract

With the rapid development of network communication technology, computer technology and Web technology, Web-based remote laboratory has been emerging and widely used, which is a strong complement to the real lab. The network control system laboratory NCSLab (Networked control system laboratory) well achieves the purpose of remote experiments, and has the ability to remotely control and real-time monitoring of laboratory equipment. It also uses Flash technology to achieve a three-dimensional interface of displaying the control devices, which can response the control equipment operation in real-time, and be observed in multi-angle and all-round.

As used here, the virtual reality interface implementation technology is based on the implementation of HTML5, combined with classic automatic control equipment such as tank, ball-beam system and other equipment. Compared with existing Flash 3D technology, it is easier to implement with HTML5 technologies，which is completely plug-in free with higher fluency and sense of reality.

The design in this paper shows that transplanting the existing three-dimensional virtual simulation interface of automatic control system to a HTML5 supported environment can make NCSLab functioning well free from plug-ins.

Key words: NCSLab；virtual-real interface；HTML5；automatic control experiment

目 录

第1章 绪论 1

1.1 研究背景介绍 1

1.2 国内外研究现状及发展趋势 2

1.3 系统介绍 3

1.3.1 NCSLab系统介绍 3

1.3.2 NetCon系统 4

1.4 本课题设计内容 4

第2章 技术方法介绍 6

2.1 现有Flash 3D技术 6

2.1.1 三维模型的构建 6

2.1.2 Flash引擎内的三维渲染 6

2.1.3 数据通讯和3D监控 7

2.1.4 Flash技术在网页3D界面显示方面的缺陷 7

2.2 技术路线 7

2.2.1 HTML5环境 7

2.2.2 基于HTML5的虚拟现实界面的实现方法 8

2.2.3 编程工具 8

第3章 虚拟现实界面设计 9

3.1 三维建模与渲染 9

3.1.1 三维模型的建立 9

3.1.2 三维模型的加载 10

3.2 创建HTML页面框架 10

3.3 创建三维场景 10

3.3.1 添加照相机 11

3.3.2 添加光源和阴影 11

3.3.3 加载三维模型 12

3.3.4 添加几何形状 14

3.4 创建动画 14

3.4.1 场景动画 15

3.4.2 模型动画 16

3.5 数据通讯和实时动作 17

第4章 基于HTML5的NCSLab虚拟现实界面设计实例 19

4.1 三维模型和场景渲染 19

4.2 三维模型与数学模型关联 21

4.3 交互设计 22

4.4 虚拟现实界面体验 22

4.5 其他控制系统虚拟现实界面展示 26

第5章 结论 29

参考文献 30

附录 三维场景加载和设置核心程序 32

致 谢 36

第1章 绪论

1.1 研究背景介绍

实验室在日常实践教学和科学研究中扮演着至关重要的角色，是连接理论和实践的应用平台，对于创新型人才的培养和科学技术的发展具有重要的意义和作用^[1]。在传统的实践教学环节中，实验主要采取的是现场操作的方式，具体来说就是老师通过对真实的实验设备或者从实际控制系统抽象出来的实验模型进行现场讲解和操作，帮助学生更好地理解和学习相应的专业知识。传统的实验室教学，其优点在于学生能够在现场直观地感受实验过程，但由于教学资源的限制，传统实验教学的弊端就显而易见了。有限的实验教学资源无法满足丰富的课本知识，学生只能在规定时间和地点进行实验操作，实验效率低，实验设备成本高，维护困难等。因此，急需要一种新的实验教学方案来改进传统实验教学的不足或促进传统实验教学的发展。

虚拟实验室是一种开放式的Web虚拟实验教学系统，它是基于网络技术和VR（Virtual Reality）虚拟现实技术构建的，能够实现实体实验室的模拟化和数字化。虚拟实验室是虚拟现实技术应用和研究的至要场所，由三个部分组成——虚拟实验台、虚拟器材库以及开放式实验室管理系统。在虚拟技术逐渐成熟的今天，人们逐渐意识到虚拟仿真实验室在教育畛域里的应用前景，在实验教学方面具备实验资源利用率高、易于维修和保护等优点，能够辅助高等院校的科研事业^[2]。