基于Three.js的镀膜机展示平台的设计

戴秀海 姚震 仲梁维 王书文 倪静

摘  要：随着网页展示技术的不断更新，使复杂的三维机械模型能够在网页中的展示成为可能。本文简单介绍了HTML5的优势及WebGL的第三方类库Three.js，详细阐述网页上场景的显示流程和场景中的模型交互，显示了WebGL的优越性，同时提出了基于Three.js的镀膜机展示平台的构建方法。此平台方便了用户的观看和操作，具備了良好的展示效果。

关键词：镀膜机;HTML5;无渲染;WebGL;Three.js

中图分类号：TP311     文献标识码：A

Coating Machine Display Platform Based on Three.js

DAI Xiuhai1，YAO Zhen2，ZHONG Liangwei2，WANG Shuwen2，NI Jing2

（1.OPTORUN（Shanghai）Co.，Ltd.，Shanghai 200444，China;

2.Mechanical Engineering，University of Shanghai for Science and Technology，Shanghai 200093，China）

Abstract：With the updating of web page display technology， it is possible to display mechanical 3D models in Web pages. This paper introduces the advantages of HTML5 and the third-party class library of WebGL-Three.js， elaborates the display flow of simple scenes on Web pages and the interaction of models in the scenes， fully demonstrates the advantages of WebGL， and puts forward the construction method of the display platform of coating machine based on Three.js. This platform is convenient for users to watch and operate with good display effect.

Keywords：coating machine; HTML5; no plug-in;WebGL; Three.js

1   引言（Introduction）

随着计算机技术和网络技术的快速进步，产品的各种展示技术层出不穷，其中虚拟展示技术逐渐成为热门技术之一。近年来，随着科学技术的逐步发展和完善，产品的展示技术已经向网页版的虚拟现实方向发展。在国外，网页版的虚拟展示技术主要体现在城市的规划、建筑的漫游、室内的设计等。在国内，此类技术主要应用在产品的展示、地图的形态构建等，如：通过虚拟展示的形式服务于博物馆和校园的网站，可以让人有身临其境的真实感。在机械、汽车、家居产品的展示方面，产品虚拟展示技术具备了使用的灵活性、丰富的交互性和体验的娱乐性等优势，使其逐渐受到广泛的重视和应用。用户只需通过登录网页，即可观看产品结构，实现人机交互，节约了时间和经济成本。当前，用户对网页的体验要求逐渐地从二维的平面模式向交互式的三维模式过渡。早期的三维图形采用的Web3D技术都存在着诸多不足之处，通常需要借助封装性很强的插件来支撑[1]。不但降低了用户对系统的体验，还减弱了系统的可移植性。工业领域的设备演示都需要依赖传统的建模软件，如Creo、3Dmax、UG、Catia等。

WebGL的第三方类库Three.js，在不同平台的网页中都具有良好的渲染与交互效果[2]。WebGL与传统展示技术相比具有一些优点，如：良好的兼容性、较低的成本，依赖性低等。用户只需通过浏览器就能体验3D交互页面，让其视觉体验变得更加具有真实感。本文探讨了镀膜机的网页动画演示研究，提出了基于Three.js的实验系统，使得用户可以在网页中体会镀膜机三维模型的逼真效果，具有较强的应用价值[3]。

2   背景及关键技术（Background and key technologies）

2.1   镀膜机

随着影像设备、手机、平板电脑等IT产品的普及，市场对镀膜机需求量逐年增大，其设计生产精度要求极高。用镀膜技术实现物体的表面处理，生活中随处可见。例如：军用、医用显示器、触摸屏、太阳能等。使用镀膜机进行镀膜具有如下的优点：

（1）操作易控。镀膜过程中，只需保持镀膜机的工作压强、电功率等条件的稳定，就能获得比较稳定的沉积速率。

（2）膜的牢固性好。薄膜与基板有着极好的附着力，改善了所镀膜物体的机械强度。

（3）成膜致密、均匀。从显微照片看，薄膜表面微观形貌比较精致细密，而且非常均匀，从而使薄膜的聚集密度得到了提高。

（4）薄膜具有优异的性能。如溅射的金属膜通常能获得良好的光学性能、电学性能及某些特殊性能。

（5）易于组织大批量生产。可以通过扩大磁控源来实现大规模的镀膜，镀膜机的自动化控制，使流水线作业成为可能。

（6）工艺环保。传统的电镀会产生废液、废渣、废气，对环境造成严重的污染。而镀膜机镀膜对环境污染小、生产效率高。

2.2   传统机械展示的不足

传统展示方法一般可分为：标本展示，实物或模型展示，幻灯片、视频、多媒体影像展示等。虽然传统展示存在着一些优点，但是其不能完全适应现代化的展示需求。

首先，传统展示方法所展示的信息在传达方面具有一定的局限性[4]。展示最直接的目的是将信息传递给参观者。传统的展示方法只能在限定时间和空间内以较为单一的展示手段向参观者传递信息。这样使得所传递的信息量有限，此外还削弱了对信息整理、归类、系统化的能力。其次，传统展示方法使参观者处于被动的认知状态。参观者参观后，很难对展览的内容形成深刻的记忆。最后，传统展示方法不注重情感的交流。传统展示方法注重强调教育功能及理论知识的传播，缺乏人与人的情感交流，使展示的方式过于生硬。通过调查发现，人们更倾向于参加娱乐程度高的展览活动，这样更易令人轻松和愉快。当今社会，设计人员开始密切关注展示中人的感情交流，让人性化和以人为本的理念在展览中得到体现。

2.3   性能更优异的HTML5标准

HTML5是遵守兼容性、实用性、非革命性发展的三点规则来制定标准的。HTML5在新版本和以前版本的浏览器上都可以正常运行。HTML5对一些常用的简单功能进行了封装，内部并没有特别复杂的功能内部。HTML5只是一种“妥协式”的规范，并不是革命性的发展。

HTML5还具备了如下的优势：（1）解决了浏览器的兼容问题。HTML5通过详细的分析各浏览器所具有的功能，并以此为基础来制定一个通用的规范，使各浏览器都能支持这个标准。（2）部分替代了原来的JavaScript。HTML5增加了部分可替代Javascript的实用功能，这些功能只要通过为标签增加一些属性即可。（3）更明确语义支持。HTML5为页面布局提供了更明确的语义元素，使页面语义更清晰。（4）增强了WEB应用程序功能。为了解决功能不足的问题，HTML5增加了新的API，这些API功能逐渐在各浏览器中得到实现。未来，HTML5在Web上的应用将会更加广阔。

2.4   基于WebGL的画面渲染

WebGL实际上是一种3D绘图标准，也是一套Javascript API[5]。它具备OpenGL ES（OpenGL for Embedded Systems）2.0与JavaScript的优点，通过HTML5中的Canvas元素进行渲染，使在网页上创建三维复杂场景与模型成为了可能。与先前的Web3D的网页实现效果相比，WebGL有以下几个优点。（1）WebGL几乎不需要依赖浏览器的插件，就可以實现对图像的渲染。（2）WebGL的兼容性好，可以在绝大多数的浏览器上运行。（3）WebGL支持CPU硬件加速，实现三维图形的渲染[6]。WebGL三维表达的优越性，在2D与3D的位图像动态渲染中都能得到很好的体现。

Three.js作为一个轻量级的跨浏览器JavaScript库，在创建和显示Web浏览器中的图形和三维动画方面有着无与伦比的优势。主要是因为其可以与HTML5的canvas元素、SVG和WebGL相结合，可以调用很多的3D显示API。利用Three.js，可以轻松地创建各种三维场景，包括摄影机、光影、材质等各种对象，从而极大地减轻Web3D的开发工作量，与其他技术相比，Three.js最大的优势在于开源且容易上手。利用其来开发一些轻量级的Web3D应用仍然是可行和高效的。Three.js提供了点、线、面、矩阵等所需的基本元素，结合相机（cameras）、物体（objects）、光线（lights）、场景（scene）、渲染器（renderer）等，即可在网页上实现三维模型的展示[7]。

3  基于Three.js的镀膜机展示系统的创建（Creation of display system for coating machine based on Three.js）

3.1   渲染器设置

渲染器就是通过调用渲染函数使存在于三维空间里的模型以二维平面的形式在网页中显现出来[8]。通常先在HTML中定义id的Canvas元素，再将渲染器和Canvas元素绑定。

3.2   场景（Scene）设置

场景就是一个三维空间，不需要有复杂的操作。程序开始时就可实例化，并将三维模型添加到其中。

3.3   照相机（Camera）设置

Three.js中主要有正投影和透视投影两种相机设置方式。透视投影中物体模型的大小会随着视点的距离变化，而正投影中物体模型相关内容如下的大小与视点的距离无关。Three.js中相机工作原理都是基于右手坐标系的。

3.4   光源（Light）设置

为了使场景给人呈现出较好的视觉体验，可添加相应的主题的光源，例如：多种光源的结合。

4 镀膜机模型的导入（Introduction of coating machine model）

Three.js为我们提供一些简单的模型的创建，如正方体、球等规则体。对于像镀膜机这种复杂的机械而言，这显然很难满足其展示要求。Three.js提供了一些加载器，可以很好地解决这类问题。首先通过三维设计软件如3dsMax、PRO/E、

UG和SolidWorks制作相关模型，然后通过相关软件将其转换成浏览器可加载的文件格式，最后将处理过的模型添加到场景中。不同类型的模型所对应的加载器也不相同，常用加载器如下：.obj（带材质）类型文件所对应的OBJLoader.js、

.mtl（带材质）类型文件所对应的MTLLoader.js、.dae类型文件所对应的ColladaLoader.js、.ply类型文件所对应的PLYLoader.js、.stl类型文件所对应的STLLoader.js、.vtk类型文件所对应的VTKLoader.js[9]。

不同客户的需求各异，企业对于产品的生产方面也应有着不同的要求，镀膜机的设计应更加突出其差异性。为了更好地满足客户的个性化订货需求，这使得镀膜机生产厂家需要一个展示平台来显示不同订单所需镀膜机的差异性。本次所提出的基于Three.js的展示平台能为企业更好地解决此类问题。首先在CREO4.0中建立镀膜机零件的三维模型，将其保存为.stl格式文件，再将模型导入到3dsMax中获得.obj格式及其材料.Mtl格式的三维模型，引入OBJLoader.js加载器，相关内容如下：

obj.initPostGL（ {

path： 'obj/'，

fileObj： 'B1.obj'，

texturePath： 'obj/'，

fileMtl： 'B1.mtl'} ）;

5   模型的平移、旋转、缩放（Translation， rotation and scaling of the model）

通过相机操作控件来操作相机的位置，从而来实现模型的平移、旋转、缩放[10]。除此以外还可以通过设置相机的position属性，调用lookAt（）函数改变相机的指向位置，进而移动相机。本次采用Three.js框架的轨迹球controls实现控制，通过加载器OBJLoader.js导入三维模型，从而实现与镀膜机模型的交互。只需对鼠标进行操作，即可实现场景中模型的平移、旋转、缩放，使浏览效果更佳。使用TrackballControls之前，需将控件绑定到相机上。

更新相机的位置可以在render循环中完成。相关的操作方式具体如下：按住左键拖动可实现模型的旋转、翻滚;转动滚轮或中键可实现模型的放大缩小;按住右键，拖动可实现模型的在场景中平移。

6   3D模型的驱动（3D model drive）

镀膜机尺寸庞大且零部件众多，使得非专业人员无法想象其工作原理，将其运行场景集成展示在网页中的意义就显得尤为突出。借助函数和控件改变它的位置、速度、旋转的角度，增添了页面的趣味性，增强了用户体验，使之更人性化。本次将镀膜机拆分为多个模块，如B1、B2…B41。先对镀膜机进行整体显示，在对各个模块进行依次显示。具体效果如下：

7   結论 （Conclusion）

通过对WebGL标准下Three.js框架在网页上基本三维场景展示进行了研究分析，并提出了镀膜机展示平台的构建方法。通过对不同加载器的调用，导入外部建好的模型;以及Three.js自带的基本功能模块，使得镀膜机的3D模型呈在网页中;鼠标的操作功能，使得用户在无须安装任何插件的情况下，能够轻松完成交互，实现模型的平移、放缩、旋转功能。目前，Three.js还不够成熟，部分浏览器尚不能全面支持，基于该技术的展示也相对较少。但随着Three.js的推广，尤其是移动端浏览器的不断支持，其跨平台的优势将得以充分体现。在不远的将来，基于three.js的展示方法将成为该领域的主导。

参考文献（References）

[1] 姚震，仲梁维，陈彩凤.基于Three.js的机械产品展示研究[J].软件导刊，2018，17（5）：187-190.

[2] Cui Peng.The Research and Design Of 3D Web Guide System Based On WebGL[C].Chinese Control and Decision Conference（CCDC），2014.

[3] 王磊，高珏，金野，等.基于Web3D无插件的三维模型展示的研究[J].计算机技术与发展，2015（4）：217-220.

[4] 贺芳.工程机械展示设计中的多媒体技术应用与研究[D].湖南大学，2013.

[5] Li Lianzhong，Zhang Kun，Xu Yang.A Cloud-Based Framework for Robot Simulation Using WebGL[C].Intelligent Systems Design and Engineering Applications （ISDEA）2015 Sixth International Conference on，2015：5-8.

[6]任宏康，祝若鑫，李风光，等.基于Three.js的真实三维地形可视化设计与实现[J].测绘与空间地理信息，2015，38（10）：51-54.

[7] Anny Yuniarti，Ardian Atminanto，Anggi Mardasatria.et al.3D ITS Campus on the Web：A WebGL Implementation[C].International Conference on Information，Communication Technology and System（ICTS），2015.

[8] 侯严庭.基于Three.js的机械产品自动装配演示[J].软件工程，2018，21（03）：23-26.

[9] Jos Dirksen，著.李鹏程，译.Three.js开发指南[D].北京：机械工业出版社，2015.

[10] 高辰飞.基于WebGL的海洋样品三维可视化的研究[D].中国海洋大学，2014.