基于Web3D 技术的三维可视化学习资源建设研究

纪 娟，黎 恩，杨 娟

（1.四川开放大学 工程技术学院，成都610073；2.国家开放大学 教育信息管理与信息系统研究中心，北京 100039）

0 引言

自远程教育这一新型教育形式诞生以来，融合信息技术丰富学习资源，激发学习者学习兴趣便是教育研究者们一直追求的目标。随着虚拟现实技术的快速发展，其逼真的交互式体验感[1]和沉浸式的体验效果，使这一技术在传统行业里得到广泛应用。在“互联网+教育”的时代背景下，虚拟现实技术与教育行业的深度融合为丰富学习资源，激发学习者兴趣提供了新的思路。Web3D 在呈现知识信息方面优势明显，能够为教学领域提供逼真的VR 学习资源和学习情境体验，达到巩固和提升学生课后学习知识和掌握技能的效果。[2]因此，随着浏览器性能的大幅度提升以及WebGL 技术的实现，未来融合Web3D 技术构建在线学习资源具有广阔的发展前景。

随着浏览器技术的发展，HTML5 和WebGL技术逐步在主流浏览器中普及，基于Web 的三维可视化应用越来越多。[3]目前，代表性的应用有腾讯云服务官网、贝壳网、智慧城市和智慧工厂等。腾讯云服务官网是Web3D 技术在企业官网中的应用，实现了企业网站的三维呈现，使得企业形象更加立体化和直观化；贝壳网是Web3D 技术在服务行业中的应用，实现了房屋内部物理空间的三维立体化展示，推进了服务行业的数字化和智能化；智慧城市和智慧工厂是Web3D 技术在数字城市建设中的应用，实现了真实物理城市在虚拟空间中数字化和三维立体化的展示，为科学建设数字中国提供了有效的实践路径。随着Web 三维可视化在各行各业中的广泛应用，未来在线教育学习资源的三维可视化是必然趋势。

1 Web3D 技术概述

众所周知，传统的虚拟现实技术存在着一些弊端，如嵌入特殊硬件设备辅助实现虚拟现实、跨平台应用时需要安装特定的插件、运行加载三维模型时速度慢等问题。以往的技术在浏览器中进行3D 展示是一件非常困难的事情，由于3D 图形的渲染计算量巨大，导致显示非常缓慢，直到提供硬件3D 加速渲染的绘图标准WebGL 的诞生。[4]WebGL 技术的诞生和发展完美地解决了传统虚拟现实技术存在的问题。Web3D 技术是基于Web 的虚拟现实技术，它将现实世界中的产品、建筑、城市和场景等在Web 网页中实现三维可视化并能进行人机实时交互。因此，基于Web3D 技术的三维可视化和交互，本质上是WebGL 技术的深入应用。WebGL 技术需要积累大量的图形学理论和数学理论，学习门槛高，一些基于WebGL 的开源框架被人们使用，如Three.js、Babylon.js、Scene.js 和PhiloGL 等。这些框架在WebGL 接口的基础上进行了封装，具有功能强大的API，可以高效、轻松地完成三维可视化和交互。在上述框架中，Three.js框架是最受人们欢迎的。

本文使用Three.js 构建基于Web3D 技术的三维可视化学习资源。基于Web3D 技术的实现主要包含两大部分：建模工具和Three.js 框架。

1.1 建模工具

沉浸式和逼真的三维学习资源能够极大地吸引学习者的学习兴趣，提高了教学效果。学习资源的三维可视化离不开对教学资源的3D 建模。目前，3D 建模工具琳琅满目，比较主流的工具有3DS Max、Maya、Zbrush、Cinema 4D 和Blender 等。按照使用的应用主题类型进行分类，主流的3D 建模工具可以分为四种类型：游戏及影视3D 模型，室内设计及建筑3D 模型，数字雕刻及绘画3D 模型，动画3D 模型。

1.1.1 游戏及影视3D 模型

3DS Max、Maya 和Cinema 4D 在制作游戏和影视类的三维模型中比较有优势，制作效率高、渲染真实感强。3DS Max 学习门槛低，学习效率高，一般是初学者的首选3D 建模工具。Maya 是设计者梦寐以求的3D 建模工具，可以渲染出电影的真实效果，是顶级设计师的制作工具。Cinema 4D 具有运算速度快和渲染效果强的特性，一般用于制作影视大片中的部分场景。

1.1.2 室内设计及建筑3D 模型

3DS Max 除了可以制作游戏和影视类的三维模型，还可以制作室内设计和建筑类的三维模型。

1.1.3 数字雕刻及绘画3D 模型

Zbrush 是一款数字雕刻和绘画3D 建模工具，具有强大的功能和直观的工作流程。Zbrush 颠覆了传统的三维设计模式，以激发艺术家的创作热情为目的，解放思想，自由发挥，尊重设计师的创作灵感。

1.1.4 动画3D 模型

Blender 是一款免费开源的三维动画建模工具，内置了绿屏抠像、摄像机反向跟踪、遮罩处理和后期结点合成等高级三维动画解决方案，提供了从建模、动画、材质、渲染到音视频剪辑处理等一系列三维动画制作解决方案。

在选择建模工具时，遵循一个基本原则，即选择适合应用主题的类型。教育资源以游戏或动画为应用主题，3DS Max、Maya、Cinema 4D 和Blender适合构建文本主题模型，由于Blender 建模工具的开源性，笔者选择用Blender 构建三维模型。

1.2 Three.js 框架

Three.js 是使用JavaScript 编写的WebGL 第三方库，是一款运行在浏览器中的三维引擎，可以通过它创建各种三维场景。[5]Three.js 封装了3D 图像编程的常用操作，内置了常用的对象和工具，功能强大，通过使用此框架中更加简单、直观的接口可以方便快捷地完成3D 模型的三维可视化和交互。

Three.js 引擎对三维图形渲染主要包括五个要素，即渲染器、场景、相机、光源、物体。[6]其中，场景、相机和渲染器是三维可视化的必要组件。Three.js 框架对3D 模型的三维可视化过程实质上是模拟真实世界中的照相过程。因此，可以把基于Web 网页的三维可视化过程归纳为三个步骤。第一步，在Web 网页中搭建相机可以拍摄的三维场景，即建立网格模型和光照两大对象；第二步，对虚拟相机进行相关设置，包括相机的位置、视线方向和投影方式；第三步，通过渲染器完成拍照动作，即将场景和相机对象作为渲染器对象投影到浏览器。

2 三维可视化学习资源设计

C 语言程序设计是计算机软件专业的必修课程，该课程的在线教学资源还是以图文、音频、视频等二维平面形式为主，资源展示方式单一、缺乏交互性和趣味性，学生学习课程的热情和积极性不高，多数处于被动学习的状态。对于一些抽象的、枯燥的和难以理解的知识内容，学生难以掌握。基于此，笔者选择C 语言程序设计课程中的二进制理论知识进行三维可视化学习资源设计，探索构建三维可视化学习资源建设路径，提高学生学习课程的兴趣。基于三维空间集成多元化学习资源设计思路如图1 所示。

2.1 梳理理论知识，制作多元化学习资源

二进制基础理论在计算机专业中属于多门课程交叉的知识内容，传统的二进制基础理论偏重于从数学学科内容科学计数和运算的角度去阐述，专业性强，知识结构抽象，学生难以理解。此外，线上学习资源形式单一，面对这样的学习内容，学生主动学习的积极性不高，缺乏学习兴趣。为了解决这些问题，需要重新梳理知识，在新的知识结构的基础上制作视频资源、文字资源和图片资源。通过构建多维度的学习资源，形成多元化的课程资源库，以期达到课程资源表现形式的多样化、抽象知识具体化和生涩难懂的知识简单化。

2.2 关联理论知识，研究三维模型

在梳理理论知识的过程中，笔者重点关注三维模型可视化的知识内容，并研究可以建立三维模型的突破点。经过分析，笔者以三维空间漫游教室模型、CPU 和晶体管3D 模型作为三维可视化学习资源的切入点。

构建三维空间目的是为学生提供虚拟的在线学习教室，以聚焦学习者并营造在线学习氛围。在传统的面授课堂教学中，物理教室是其中一个重要的组成部分，它为教师和学生提供面对面交流的物理空间，让同处于一个物理空间的人们获得归属感，同时缩短了人与人之间的距离。三维空间可以共享物理教室的大部分功能，除此之外，它还具有更多的优势。由于受到场地面积的限制，物理教室可容纳的学生人数是有限的，而三维空间则没有座位数量的限制，可以容纳更多的学生；在学习氛围和交流体验方面，物理教室的教育过程中必不可少地存在人际关系处理的问题。而在三维空间中，学生之间的交流以及学生与教师之间的交流是平等的，学生可以投入大量的精力去学习，不需要过多的关注人际关系，一切以学习者为中心。

在教学内容方面，融合计算机系统知识，从CPU 中的晶体管构成解析二进制理论实现生活中抽象信息的工作原理，探讨计算机系统选择二进制实现文字、图片、音频和视频等信息的原因。基于此，笔者选择CPU 和晶体管3D 模型作为三维可视化学习资源的模型对象。通过直观CPU 中晶体管的显示状态去理解二进制的工作原理，使得抽象的知识具体化，生涩难懂的知识简单化。

2.3 基于三维空间集成多元化学习资源

视频资源、图片资源和文字资源以“一个中心四平面”的方式集成到三维空间中。以CPU 和晶体管3D 模型为一个中心，位于三维空间的中心点。以多元化学习资源为四平面，分别贴合于三维空间中的东、南、西、北四个平面上。

3 三维可视化学习资源的实现

基于Three.js 框架构建三维可视化学习资源的关键是实现三维空间场景以及在此场景中集成视频资源、图片资源和三维模型。图2 是基于Web3D 技术三维可视化学习资源实现的效果图。

3.1 三维空间的可视化实现

三维空间的3D 模型由四面墙体和一块地板组成，墙体的颜色选择了白色，而地板的颜色选择了灰色。地板和墙体是由基础的长方体几何体构成，不需要使用三维建模工具来创建这些几何体，可以通过Three.js 框架中的三维几何体对象实现。具体步骤为：第一步，使用三维几何体BoxGeometry（）函数构建地板和墙体实体；第二步，使用MeshLabmberMaterial（）函数设置墙体和地板的外观。

3.2 CPU 三维模型的实现

CPU 三维模型的结构复杂，为了实现CPU 模型的三维可视化，首先需要使用Blender 建模工具完成CPU 的复杂模型，形成CPU 的三维模型文件，包含.obj 和.mtl 文件。其中，.obj 文件是核心文件，用于三维可视化和交互，而.mtl 文件是CPU 三维模型的外观基础信息文件；然后，需要引入OBJLoader 插件和MTLLoader 插件，并通过外部加载模型文件的方式将CPU 三维模型文件引入到三维空间的场景中。在场景中，可以使用scale.set（）方法调整模型的大小使以适应场景，并使用position.set（）方法设置模型在场景中的中心位置。

3.3 集成多元化学习资源的实现

视频资源、PPT 资源和图片资源是二维平面资源，将它们集成到三维空间中，构成多元化的学习资源。为集成多元化学习资源，需要对不同类型的学习资源进行本质分析。视频资源本质上是由一帧一帧的图片流组成，PPT 资源通过工具可以转换成图片资源。因此，集成三种类型的学习资源实质上是实现图片资源的三维可视化。在Three.js框架中，通过创建纹理贴图对象实现图片资源的三维可视化。与学习资源相关的纹理贴图对象包含VideoTexture 和Texture。其中，VideoTexture 是加载视频资源对象，而Texture 是加载图片资源对象。具体实现步骤是：第一步，创建视频对象video，设置视频地址和播放参数；第二步，创建texture 纹理对象，在material 材质对象中设置map 值为texture 纹理对象；第三步，创建长方形geometry 几何体对象；第四步，构建网格模型，形成mesh 网格模型对象，并设置mesh 网格模型对象的位置；第五步，将mesh 网格模型对象添加到场景中。

4 结语

本文以C 语言程序设计课程为例，通过梳理二进制理论知识，提出了学习资源的三维可视化设计思路，并按照该设计思路采用Web3D 技术实现学习资源三维可视化，旨在丰富学习资源的展示形式，使抽象的知识具体化，生涩难懂的知识简单化，从而提高学生学习兴趣。随着互联网技术的快速发展以及Web3D 技术的广泛应用，传统的二维平面网页将逐渐升级为三维立体化网页，融合新技术探索构建三维可视化学习资源，为在线学习资源的改革和创新提供重要的参考。笔者设计的三维空间较为简单，未能呈现出丰富的虚拟学习场景，因此，在下一步的研究中，将使用建模工具构建逼真的教室场景，让学生能够身临其境地体验真实的上课场景，从而增强他们的归属感和参与感。