基于外部Flash的Web3D虚拟场景二维导航

罗立宏　谭夏梅

(广东工业大学数字媒体系　广东 广州 510006)

0　引　言

多年来,虚拟现实一直是信息领域科技工作者和产业界研究者非常感兴趣的题目。而近年来，随着互联网的飞速发展，基于互联网的虚拟现实技术(Web3D)也越来越吸引人们的关注。

虚拟现实技术的基本原理就是在计算机中预先建好一组三维模型，组成一个三维场景。而在场景中有一个或者多个摄像机对象，这些摄像机在场景中的位置可以被用户通过鼠标、键盘等外部设备控制。这样，当用户操作外部设备时，场景中的摄像机对象就会随之移动、旋转。计算机通过该摄像机进行实时渲染，就得出一系列快速切换的屏幕图像，使得用户感觉就像在虚拟的场景中漫游一样。然而，如果软件系统仅仅给出一个三维场景让用户漫游，而没有其他导航和方向指示手段，用户在场景中会很容易迷失方位。就像一个人初到一个陌生的地方，走不了几段路，就会分不清东南西北了。国内外的可用性研究都表明，除了三维场景，额外给出一个平面地图，并在地图中加入一个实时反映摄像机位置方向的图形，会使系统变得更加友好和容易使用[1-2]。如果是直接使用C++、Java、C#等语言开发的单机版系统，为了实现地图二维导航，一般会对系统界面进行合理设计，在界面中分出一部分作为地图区域，而另一部分作为三维场景区域，三维场景的摄像机位置与地图中的指示图标相互影响[3]。如果引擎支持多通道的话，也可以在原本属于三维场景的区域划出一块显示俯视图的通道[4]。遗憾的是，这些单机板系统的方法不适合目前大多数的Web3D应用。C++、Java等语言不适合直接用来开发Web3D项目。目前开发者们通常使用专用的支持嵌入或可发布成网页的Web3D引擎或软件工具，如VRML、Virtools、Unity3D、HTML5/WebGL、TurnTool等。对于二维导航功能的实现，使用不同的引擎和工具，采用的方法有所不同。其中文献[5-6]中研究了在VRML的Web3D应用中实现二维导航的方法，文献[7]说明了在Virtools中的实现思路，文献[8]则讨论了在Unity3D网络游戏中的导航问题，而文献[9]则提及了在WebGL中的实现方法。

另一方面，TurnTool也是一种强大的Web3D引擎，其功能丰富、互动性强、色彩还原性好[10]。与其他引擎相比，其最显著的优势在于其压缩比高。在Web3D应用中，场景文件下载时间长短往往是用户感受好坏的关键。而一个大型的场景，使用TurnTool制作一般都不会超过1.5M，下载时间的大幅缩短大大提升了用户体验。因此，在许多场合下，尤其强调色彩效果(如艺术应用)或需要运行大场景的Web3D应用(如城市规模的Web3D应用)，TurnTool都是一个非常好的选择[11]。然而，TurnTool是一个单通道的引擎，在其窗口范围内难以用另一个摄像机再开辟出一个区域用于二维导航，已有的研究在这方面也较少。本文在该方面进行研究，提出一种使用外部Flash对象作为导航图，依靠JavaScript实现对象间通信的方法，实现TurnTool Web3D应用的二维导航。

1　原理及数据流

带有指示图标的导航图实际上就是两张图片(指示图标图片和地图图片)叠加在一起，其中指示图标图片可在地图上移动、旋转。因为HTML中不允许两张图片叠在一起，因此需另想他法。可以设计一个Flash对象，在Flash中把图片叠加在一起。其中指示图标图片的位置和旋转角可由ActionScript脚本语言实时控制。Flash可通过内部函数和JavaScript与网页实现通信[12]。具体方法有：(1) 通过GetURL动作加载外部页面；(2) 通过fsCommand动作实现变量向外部传递；(3) 通过SetVariable()函数实现从外部传入数据。所幸的是，大部分的Web3D引擎和插件都支持JavaScript的接口，通过JavaScript，可以获取和控制场景中摄像机的行为。这样，通过Flash与网页JavaScript通信，就可以实现三维场景中摄像机对象参数的传递，从而使场景摄像机和导航图的指示图标的行为相互影响。数据流如图1所示。

图1　二维导航数据流

因此，在网页的设计中，页面至少要包含两个界面元素：三维场景对象和Flash导航图对象。其他界面元素可根据实际需要而增加。对于用户，需要先安装浏览三维场景的插件，而导航图所需的Flash Player插件则是一般计算机上都已安装有的。

2　Flash导航图设计

Flash导航图的设计并不复杂，主要是要做好变量的传递和接收的准备工作。

在Flash中，导入地图和指示图标图片，分别放在两个层中。确保指示图标在地图的上面。把指示图标图片转换为影片剪辑，为该影片剪辑的实例起个名字，如“Ptr”，以方便在程序中引用。另外利用文本工具创建三个文本框，同样为每个文本框命名，如“TextX”、“TextY”、“TextR”，并设置三个变量与他们关联，如设置三个命名为PosX、PosY、Rot的变量。三个文本框用来接收外部传入的数据。之所以为三个，是因为二维导航图需要接收三维场景摄像机的x、y坐标以及xy平面上的旋转方向角。设置好后，在时间轴第一帧进行如下设置：

TextX._visible = false;

TextY._visible = false;

TextR._visible = false;

this.onEnterFrame = function(){

Ptr._rotation = Rot;

Ptr._x = PosX;

Ptr._y = PosY;

}

其中前三行是把三个文本框隐藏起来，因为三个文本框只是接收数据所用，是不需用户看见的。后五行是使指示图标的位置调整，图标的位置和旋转方向角根据PosX、PosY、Rot的值而定。代码把函数设置成为进入帧的响应函数，Flash影片又设置为循环播放的，因此，程序段会不断地被调用，达到实时更新的目的。

3　对象间通信和导航的实现

前文Flash中PosX、PosY、Rot三个变量的值是多少，是由页面的JavaScript去决定的。首先JavaScript需通过场景引擎或插件的接口函数取得摄像机的数据。TurnTool与JavaScript通信的方法是利用string TNTDoCommand(string cmd)方法。其中参数cmd是形如“object.method(arg1,arg2,...,argn)”的TurnTool内部函数，string是方法的返回值。TNTDoCommand()的意义在于：从JavaScript中传入命令，由TurnTool场景去执行，执行的结果又通过返回值string返回给JavaScript。如此，就实现了JavaScript和TurnTool插件对象的通信。

Web3D系统一般要做到这样的效果：鼠标左键一按下，场景漫游就开始，Flash导航图的指示图标就随着摄像机移动；鼠标左键松开，摄像机和指示图标就不再动。为了实现这样的效果，需要在JavaScript中开设一个定时器，鼠标一按下，定时器就开始，鼠标一松开，定时器就结束。利用定时器，JavaScript定时做数据查询和发送工作。定时器的开设和运行的过程可以按图2所示的流程图实现。

图2　定时器设置与运行流程

在定时进行的数据处理的工作中，主要包含摄像机参数获取，数据转换和数据发送的工作，TurnTool场景可在定时流程中“数据处理”步骤位置插入如图3所示的处理流程。

图3　摄像机参数获取流程

上述流程中，取得场景摄像机的x、y坐标和旋转角r的步骤需要利用TNTDoCommand方法与TurnTool进行通信，以文本方式传入要执行的命令。查询的结果返回JavaScript保存在x、y、r变量中。然后利用地图的东南西北边界坐标和地图的长宽像素计算指示图标在地图中的相对位置。东南西北边界坐标和地图宽高要根据实际情况赋值。视点在地图中相对位置relX和relY的计算方法为：

(1)

(2)

式中:Xeast、Xwest、Ysouth、Ynorth为地图的东西南北边界坐标，Wm和Hm是地图的宽和高。

JavaScript把relX、relY传入Flash的步骤要使用SetVariable()方法。如前所述，PosX、PosY、Rot是Flash导航图对象中三个隐藏文本框的对应变量，通过这样传入数据后，三个变量就会取得新值，Flash进行帧循环时，就会依照前面的ActionScript代码更新指示图标的位置和旋转角，从而使得导航图的图标能跟着摄像机的运动而实时变化。

4　反向定位

如前所述的是三维场景摄像机位置控制导航图指示图标。而二维导航图一般还有另一功能，就是让指示图标反过来也可以决定场景摄像机的位置。例如可以这样设计：让用户在二维导航图上双击某个感兴趣的位置，指示图标马上跳到这里，三维场景中的摄像机位置也随之变化，跳转到与指示图标相对应的位置，用户在场景中观察到新的物体。

反向定位是与导航数据流相反的过程。可以这样实现：(1) 在Flash对象中增加一个响应鼠标双击的函数，在函数中获取指示图标的_x、_y属性。然后用fscommand ()函数把属性值发送到JavaScript。(2) 在JavaScript中创建和实现Flash_DoFSCommand(command, args)函数，其中args参数就是传过来的值。接收完_x、_y之后，利用已知的地图东南西北边界值反算出摄像机在三维空间中的对应x、y坐标。(3) JavaScript利用TNTDoCommand方法与TurnTool进行通信，更新摄像机的位置。TNTDoCommand的参数是根据前面算出的x、y坐标构造的字串。由于篇幅所限，反向定位的详细流程分析从略。

5　实　例

图4是笔者利用上述方法实现的一个项目实例。程序总体构架是一个HTML网页，页面的交互用JavaScript实现，网页打开时隐藏了IE的菜单和工具栏。如图，网页界面上有多种元素，除了左上方的三维场景对象和右下方的导航地图对象外，还有提示文本、菜单按钮、链接图片等内容。其中三维场景是TurnTool对象，导航地图是Flash对象。在导航地图中的右上角，白色眼睛形状的图标就是导航指示标志，眼睛的位置与三维场景中摄像机的位置对应，眼睛的开口朝向与摄像机的观察方向对应。如图4所示，从指示标志在地图的方位可知，摄像机的当前位置在三维场景的东北角，正朝西南方向观察。该实例中也支持反向定位功能，在地图中双击某处，指示图标将跳转到该处，同时三维场景中的摄像机也跳转至相应的位置。

图4　二维导航应用实例

6　结　语

本文提出一种利用场景外部Flash作导航地图，利用JavaScript进行对象间通信实现了TurnTool Web3D场景的二维导航的方法。该方法能解决TurnTool引擎中难以实现二维导航功能的问题。另外，该方法还有一定的通用性，除了适用于TurnTool之外，只要某种Web3D引擎提供了和JavaScript通信的方式，就可以利用本文的方法实现场景的外部二维导航。

[1] 胡良柏, 王志红, 韩立钦, 等. 网络三维虚拟校园建设及应用[J]. 测绘科学, 2013, 38(1):168-170.

[2] Kim H K, Song T S, Choy Y C, et al. Guided Navigation Techniques for 3D Virtual Environment Based on Topic Map.[C]// Computational Science and ITS Applications-Iccsa 2005, International Conference, Singapore, May 9-12, 2005, Proceedings. DBLP, 2005:847-856.

[3] 王伟, 袁海峰, 陈桂兰. 基于VRML的虚拟社区与二维地图互响应的研究[J]. 计算机仿真, 2009, 26(6):281-284.

[4] 陈勇, 马纯永, 陈戈. 基于VC/OpenGL的虚拟海大校园导航系统[J]. 计算机辅助设计与图形学学报, 2007, 19(2):263-267.

[5] 刘小英,张健.三维校园虚拟现实平台的设计与实现[J].湖北农业科学,2014,53(12):2909-2912.

[6] 刘硕,穆森,李蜀瑜.基于VRML的3D校园漫游导航系统的设计实现[J].计算机应用与软件,2013,30(1):196-199.

[7] Liu Y, Hu J W, Cui P Z. An Implementation Approach for Interoperation Between Virtools and HLA/RTI in Distributed Virtual Reality System[M]// Proceedings of the 6th International Asia Conference on Industrial Engineering and Management Innovation. Atlantis Press, 2016.

[8] Messaoudi F, Simon G, Ksentini A. Dissecting games engines: The case of Unity3D[C]// 2015 International Workshop on Network and Systems Support for Games (Net Games). Zagreb, CROATIA. 2015, 12, 03-04.

[9] 陈勇,张灿灿,刘洲, 等.WebGL在网页室内房型展示中的应用[J].物联网技术,2016,6(11):74-75.

[10] Zhang Feng, Wang Weiwei. Research of Product Virtual Digital Model Design Based on TurnTool[C]// 2nd International Conference on Engineering Design and Optimization (ICEDO 2011). Zhejiang Univ, Ningbo Inst Technol, Ningbo, China.2011.8.

[11] Hwan Kim Jeong.A Study on a Technology of Building Experiment 3D Model House by Experience in Cyberspace of Virtual Reality[J].The Korean Journal of Art and Media, 2011,10(1):25-35.

[12] Reimers Stian, Stewart Neil. Presentation and response timing accuracy in Adobe Flash and HTML5/JavaScript Web experiments[J]. Behavior Research Methods, 2015, 47(2): 309-327.