基于Three.js库的双模界面在交互式Web3D中的应用

文/安一飞

1　前言

先进的3D图形越来越多地用于各种领域的网络应用，如手术培训和博物馆展览。 与此同时，Web技术的创新（例如HTML5和WebGL）允许将高级3D图形直接集成到网页中，而不需额外的插件。虽然，现代图形硬件的可用性越来越高，但目前仍没有标准的方法来有效地将传统的2D网页内容（例如文本和图像）与交互式3D环境相结合。

通常，3D应用程序专注于图形，沉浸式和交互性，而不是传统的Web任务（如定位和查看信息）；3D图形提供更逼真和更丰富的用户体验；但是，3D环境往往需要用户借助一个视角与相关内容进行交互，并且通常需要用户导航到某个位置才能检索信息，从而降低了用户完成常见Web任务的能力（如检索文本信息）。在本文中，我们采用了一个WebGL 3D图形JavaScript库——Three.js，给出了一个双模式方法的原型实现，用于在交互式3D环境中进行信息传播的接口设计，通过创建web交互式应用程序，允许用户在2D和3D用户界面之间瞬间切换。与单独的超文本或者3D模式相比，双模式用户界面具有总体任务性能最佳的优势，且在实践上，美学上更受用户青睐。

2　系统描述

原型系统以博物馆形式实施应用。该应用程序允许用户探索博物馆参观者的活动，以及可能在这个博物馆中找到的陈列品。原型系统通过Three.js JavaScript库使用HTML5，CSS3，JavaScript和WebGL实现。创建了三个应用程序，即“2D网站”，它是一个“平面”网页，其中包含参观者对象的3D呈现。第二个应用程序是一个使用Three.js实现的“3D网站”。它包含一个3D对象，用户可以探索特定物体并与之互动。当用户在对象附近时，呈现2D文本信息。最后，实现了将“2D网站”和“3D网站”组合在一起的“双模式网站”，使用户能够通过分别按下键盘上的“2”和“3”键在两个网站之间切换。双模式网站具有模式之间无缝转换的附加功能。

3　测试方法

原型测试侧重于测量使用三个应用程序来检索信息的速度，以评估用户界面的有效性。在2D模式中，参与者需要使用标准超文本和鼠标点击交互来检索答案。在3D界面中，参与者必须导航3D环境才能从信息板上检索信息。在双模式下，用户可以在任何时候在用户界面之间切换;然而，“双模式”中的问题鼓励用户回到3D模式，以避免它们停留在2D模式。每个问题都是在用户在阅读问题后与应用程序进行交互的那一刻开始计时的，计时器在参与者完成了答案写作的那一刻就停止了。一旦速度测试完成，参与者被要求填写一份调查问卷，用于衡量他们对每个应用程序的满意程度，以及他们对李克特量表上一系列关于用户界面，美学，表现，易用性，获取信息的快捷程度和切换的简易性的认可程度。

为了测试原型，我们招募了11名参与者。在测试之前，对每位参与者都被给予了实验的简要说明，同意书和一份简短的预先研究问卷，以确定参与者的资料。在测试后，参与者被给予研究后调查问卷。调查问卷询问每位参与者对于与用户界面，获得信息的难易程度，美观性以及网站性能表现的满意程度。评分计算方法为：“非常不满意”评分为1，“不满意”评分为2，“中性”评分为3，“满意”评分为4，对于“非常满意”评分为5。

4　测试结果

原型测试的结果表明，2D网站获得了用户界面的最高评价，双模网站只降低了一个点。 信息的易用性在双模网站上被评为最高，而2D网站紧随其后。3D网站被认为是最美观的，2D网站被认为是最好的表现。 这些结果将为研究和开发过程的进展提供信息。很明显，2D和双模网站在每次测试中都很接近，以及对它们提供的反馈，并且很明显，3D网站除了一个区域外都缺乏，获得的满意度较低，以及较低的测试速度。 这些测试结果说明，双模式应用比单独的2D或3D接口更直观和更有效。

5　结论

在与3D虚拟环境结合使用时，本文提出了双模式用户界面，以增强用户与网络内容的交互。 这项先导性研究表明了3D虚拟环境的双模接口的前景。未来的工作将通过将3D视图与2D视图更密切地结合，并在3D内容中扩展2D注释来改进双模式界面。 我们还将扩大研究范围从而充分挖掘双模接口的优势。