基于 WebGL 的工程制图虚拟模型库研究论文

　　摘   要：为了克服工程制图课程教学的困难,改变传统的教学方法,利用 WebGL 的第三方库 Three.js 建立了与工程制 图教材配套的虚拟模型,通过编程实现了模型库创建、网页显示功能、模型手动装配功能等,能够在各种手机端、微信端或电 脑端查看虚拟模型。通过随时随地的打开模型教学以克服学生对于复杂模型学习难以想象和表达模型空间结构、位置的困难情 况,快速提高学生识图和空间思维能力,此方法为工程制图类课程的教学提供了实践依据。

　　关键词：Three.js；虚拟模型；工程制图
 

Research on WebGL Based Virtual Model Library for Engineering Drawing

ZHENG Chuntao1, YANG Ping1, ZHAO Xiuting1, MO Chunliu2
(1.Guangdong University of Technology, School of Advanced Manufacturing, Jieyang Guangdong 522000;
2.Guangdong University of Technology, School of Electromechanical Engineering, Guangzhou Guangdong 510006)

　　【Abstract】：In order to overcome the difficulties in teaching engineering drawing course and change the traditional teaching method, the third-party library of WebGL, Three. js sets up a virtual model matching with the teaching material of engineering drawing, and realizes the function of creating the model library, displaying the web page and assembling the model manually by programming, and can view the virtual model on various mobile phone, wechat or computer. By opening the model teaching anytime and anywhere to overcome the students' difficulty in imagining and expressing the spatial structure and position of the model in the study of complex models, the students' ability of reading maps and spatial thinking can be improved rapidly, this method provides a practical basis for the teaching of engineering drawing courses.

　　【Key words】：Three.js;virtual model;engineering drawing

　　0 引言

　　本科教学工程项目是为了适应教育部对高等学校教 育教学要求而设,目的是通过一系列研究,努力提高课 程教学质量,提高学生学习水平和能力。高等学校工程 制图课程的教学,一直以来都面临老师难教,学生难学  (难想象)  的境地。因此希望通过本科教学工程项目改 变这一普遍存在的问题,为每位大学老师和学生提供有 益的帮助,从而提高教学质量。在传统教学中,老师上 课需要携带很多模型,上课时才能对照模型给学生讲清 楚教学内容,但是当模型多的时候,老师无法携带。因此,在工程制图类课程中能否建立虚拟模型库就是我们 积极思考的问题。通过大量研究发现在工程制图的教学 改革中,利用计算机技术,开发适合工程制图课程教学 的虚拟模型库是可行的,能够使学生克服对于复杂模型 难以想象的客观问题,学生通过自己操作屏幕上的模 型,从而对模型有更深入的了解和掌握。建立虚拟模型 库对于工程制图教学显得至关重要。

　　1 HTML5 和 WebGL 技术

　　随着前端网页技术的快速发展,在网页上展示三维 模型备受青睐。网页上展示三维模型,可以避免在利用三维软件展示模型对电脑配置要求高以及不同软件之间 格式不兼容问题的出现,网页上展示模型不受建模软件 的限制,不需要任何插件,打开网页即出现三维模型。 WebGL 是网页开发语言 JavaScript 形式的绘图 API 接 口,可提供设备硬件图形能力的直接调用。HTML5 则是 网页开发语言新标准,提供了网页上的 Canvas“画布”, 使网页上的 3D 对象可以展现。在此之前,  3D 物体形象 在网页上不能直接展示,必须使用非标准的特殊网页语 言或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案,使程序员可以直接在网页上展示 物体的 3D 图象,并且这种展示是直接使用设备的图形 处理器完成的,其绘图性能能够得到保证。3D 网页技 术应用很广,  体验 3D 网页也非常简单,只需要电脑支 持图形显示设备且有足够高版本的浏览器即可。

　　利用 WebGL 的第三方库 Three.js 建立的虚拟三 维模型 [1] ,可以充分调动学生的想象力,在网页上通过 操纵鼠标或手机屏幕实现互相交互,使学生沉浸在整个 教学活动过程中,以克服传统教学模式的弊端,提高了 教学质量。

　　Three.js 是基于原生 WebGL 封装运行的 3D 引擎 [2] , 是一个轻量级、跨平台的 JavaScript 库,可以在不依赖 任何浏览器插件的情况下,创建一个 GPU 加速的 3D 场 景,因此完全兼容当前主流浏览器如 IE、火狐、谷歌和 360 浏览器等。利用 Three.js 脚本语言可以加载各种三 维模型格式如 .stl、  .obj、  .fbx、  .dae 和 .json 等 [3,4] ,用 于展示复杂的产品模型。

　　2 虚拟模型库建设

　　《工程制图》课程是大一新生必修的专业基础课 [5] , 该课程对学生的空间想象能力要求较高,对于如何提高 学生的识图和空间想象能力,是教师应该思考和解决的 问题。以往的教学是通过教师携带实物模型上课,在课 上让学生看实物来锻炼学生的思维能力,但是实物模型 难携带且需要一定的空间和购买费用,并且实物模型在 更新和维护方面存在弊端。随着计算机技术的发展,利 用 Three.js 编写程序实现虚拟模型库的创建,虚拟模 型库通过网页显示,学生通过手机或电脑就可以实时查 看模型,移动、旋转、缩放模型,达到与模型实时交互 的效果,从而快速提供学生的空间想象能力。

　　为了创建与教材相配合的完整的虚拟模型库,需要 建立组合体、轴测图、标准件、常用件、零件图的虚拟 模型库模块,在网页端学生通过选择不同的模块,即可 以根据需要操作模型。

　　2.1 模型创建、加载和操作

　　利用三维建模软件进行建模,为了将建立的与教材配套的虚拟模型包括组合体、轴测图、标准件、常用 件、零件图和装配图更突出的显示在网页上,需要以 不同颜色表示模型的不同部分,这样能更清楚的表达 模型的内部结构,模型颜色的渲染在 SolidWorks 中完 成,然后将模型保存为 IGS 等格式,利用 3D Max 软 件打开模型 [6] ,然后导出为 obj 格式和 mtl 格式,利用 Three.js 编程加载模型以网页的形式显示模型 [7] ,用手 机或电脑可以查看模型,利用 mtl 文件加载模型的材 质,  obj 文件加载三维模型,加载模型的具体命令如下。

　　THREE .Loader.Handlers .add(/\ .tga$/i, new THREE.TGALoader());
　　
　　var mtl_loader = new THREE.MTLLoader(); mtl_loader.setPath('../../obj/');

　　mtl_loader.load('*.mtl', function (materials) { materials.preload();

　　obj_loader.setMaterials(materials);  
    
　　obj_loader.load('*.obj', function (object) { object.scale.multiplyScalar(.1);

　　scene.add(object);

　　}, onProgress, onError);
　　});
 

(a)手机端查看模型


(b)电脑端网页版查看模型
图 1 查看模型
Fig.1 Shows the model

　　对于组合体、轴测图、标准件、常用件、零件图等 虚拟模型库创建和加载方法一样,模型库在手机端和电 脑端网页版显示如图 1 所示。为了能在手机端显示模 型,需要定义 Android 和 iOS 系统以及微信端。通过 编程,可以在安卓手机、苹果手机以及微信端打开虚拟 模型库。

　　2.2 装配模型创建

　　在工程制图装配图章节的教学中,要求学生能够理 解各个部件,同时理解各个部件装配后的结构关系,能 够画出装配模型的三视图。对于这些要求,学生首先应 该能够想象出三维模型,因此对于学生的空间想象能力 要求较高。

　　为了创建装配模型,首先利用三维建模软件将装配 模型建好,利用 3D Max 软件将模型导入,然后保存为 obj 和 mtl 的格式文件,对于装配图模型的创建和其他 模型一样,对于装配模型的加载采用以下命令,加载后 的装配模型可以鼠标左键拖动,从装配模型中移出并可 以旋转,以便详细查看模型,同时也可以实现装配图的 爆炸图形式,在爆炸图中通过设置每个部件到装配中心 的距离即可以实现此功能,装配图如图 2 所示,装配模 型手动、自动拆分图如图 3 所示。
 

图 2 装配图模型
Fig.2 Assembly diagram model
 

图 3 装配模型手动、自动拆分
Fig.3 Manual and automatic splitting of assembly model

　　THREE.OBJMTLLoader.prototype = { constructor: THREE.OBJMTLLoader,

　　load: function ( url, mtlurl, onLoad, onProgress, onError ) {

　　var scope = this;

　　var mtlLoader = new THREE.MTLLoader( url. substr( 0, url.lastIndexOf( "/" ) + 1 ) );

　　mtlLoader.crossOrigin = scope.crossOrigin;

　　2.3 3D 模型交互功能实现

　　当上课需要查看模型时,不需要使用三维软件就应 该能够查看模型,因此需要将虚拟模型库文件发布到校 园网内,学生打开网页链接就能看到模型。在网页上习 惯用鼠标进行交互操作三维模型,为了实现如鼠标左键 按住旋转、右键按住平移、滚轮缩放模型,需要利用 OrbitControls 定义镜头函数,具体命令如下：

　　THREE .OrbitControls = function ( object, domElement ) {

　　this.mouseButtons = { ORBIT: THREE.MOUSE. LEFT, ZOOM: THREE .MOUSE .MIDDLE, PAN: THREE.MOUSE.RIGHT };
　　}

　　通过定义上述函数即可以实现利用鼠标自由的操控 模型,以详细了解每个模型的内部结构。

　　3 网页显示功能实现

　　为了在网页上显示三维模型,首先需要建立场景 Scene, 并建立场景的背景颜色,场景中如果没有光源,整个模型 在场景中是看不见的,  Three.js 中可以设置点光源 (Point Light)、聚光灯 (Spot Light)、平行光源 (Direction Light) 和环境光 (Ambient Light)。因此需要在场景中增加环 境光和平行光等光源,环境光就是笼罩在整个空间无处 不在的光,平行光就是平行的一束光,模拟从很远处照 射的太阳光。其次必须定义相机 Camera,需要利用相 机进行透视投影 Perspective 设置才能更真实的表达三 维模型,相机方向指向场景对象的中心。透视相机更接 近人眼的观看效果,有“近大远小”的效果。应用比较 广泛,具体命令如下。相机决定了场景中哪个角度的景 色会被渲染出来。

　　// 创建场景

　　scene = new THREE.Scene();

　　// 创建相机

　　camera = new THREE .PerspectiveCamera (angle, SCREEN_WIDTH / SCREEN_ HEIGHT, nearest, farthest);

　　camera.position.set(4, 4, 6);

　　// 环境光

　　scene.add(new THREE.AmbientLight(4210752, 3));

　　// 平行光

　　var light = new THREE . DirectionalLight (16777215, 1);

　　light.position.set(0, 50, 50);

　　scene.add(light);

　　最后,必须定义渲染器 Renderer,渲染器的设置采 用 WebGLRenderer,   都 是 使 用 HTML5 的 最后,必须定义渲染器 Renderer,渲染器的设置采 用 WebGLRenderer,   都 是 使 用 HTML5 的 <canvas> 直接内嵌在网页中。WebGL 渲染器使用 WebGL 来绘 制场景,  使用 WebGL 能够利用 GPU 硬件加速从而提 高渲染性能。具体命令如下：

　　// 创建渲染器

　　renderer = new THREE.WebGLRenderer({

　　antialias: true,   // 平滑效果,  设置为 true 开启反 锯齿

　　alpha: true,   // canvas 画布背景透明

　　 });

　　4 结语

　　利用基于 WebGL 的第三方库 Three.js 编程建立 基于虚拟现实的工程制图教材配套的虚拟模型库,在网页端查看模型,可以避免安装三维建模软件和对电脑配 置过高的要求,通过打开网页可以实现手机端和电脑端 操作模型。该项技术的应用使学生在工程制图课程学习 中能够对各种模型实现在屏幕上的自如操作,极大的提 高了教学质量,提高了学生的识图和空间想象能力。与 传统 PPT 教学相比充分调动了学生的想象力,  为需要 使用模型进行教学类课程提供了有力的理论依据。

　　参考文献

　　[1] JOS D.Three.js开发指南:基于WebGL和HTML5在网页上 渲染3D图形和动画[M].北京:机械工业出版社,2019.

　　[2] 何东琴,王聪华,龚啸 .基于Three.js无插件三维模型展示研 究[J].计算机时代,2018(3):18-19+23.

　　[3] JOS D.Three.js开发指南:The JavaScript 3D Library for WebGL[M].北京:机械工业出版社,2015.

　　[4] 李兴田,张丽萍 .基于WebGL的工程制图网络虚拟模型库的 开发[J].图学学报,2016(6):836-841.

　　[5] 冯开平,莫春柳.工程制图(第3版)[M].北京:高等教育出版社, 2013.

　　[6] 唯美世界 . 中文3ds Max 2016从入门到精通[M].北京:水利 水电出版社,2018.

　　[7] JOS D.Three.js开发指南[M].北京:机械工业出版社,2015.

关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！