基于Three.js的机械产品展示研究

姚震 仲梁维 陈彩凤

摘 要：普通的商品网页展示方法很难满足机械产品的展示要求。随着HTML5的出现以及WebGL技术的推广，在网页上展示三维机械模型有了新的解决方案。提出了基于Three.js三维模型展示平台的构建方法。对网页上简单的三维场景显示流程和场景中三维模型的交互进行了分析，借助WebGL的第三方类库Three.js，免去了网页3D展示所需的渲染插件麻烦，显示了WebGL的开放性、免插件、跨平台、硬件加速的优势。用户可在网页面上观看设计的三维效果，操作简便，效果很好。

关键词：HTML5；无渲染；WebGL；Three.js；三维模型

DOI：10.11907/rjdk.172850

中图分类号：TP317.4

文献标识码：A 文章编号：1672-7800（2018）005-0187-04

Abstract：The general merchandise webpage display method is difficult to meet the display requirements of mechanical products. With the emergency of HTML5 and the promotion of WebGL technology， a new solution is provided for the display of three-dimensional mechanical models on webpages. In order to emphasize the construction and implementation of a realistic mechanism， we use Three. js of WebGL′s third-party library to eliminate the rendering plug-ins required for displaying a web page in 3D， and present a three-dimensional model display platform based on Three.js. The interaction between the simple 3D scene display process and the 3D model in the sceneis analysed. It shows the advantages of WebGL's openness， plug-in-free， cross-platform， hardware acceleration. The three-dimensional design model created on the web page is convenient for the user to view the designed three-dimensional effect on the web page. The operation is simple and has achieved good results.

Key Words：HTML5； no plug-in；WebGL； Three.js； three-dimensional model

0 引言

當前，计算机和互联网技术在各领域都得到了广泛应用，特别是Web3D技术。随着对网页体验要求的不断提高，网页正逐渐从传统的二维平面模式向交互式三维模式发展。早期的三维图形采用的Web3D技术主要有VRML、GL4Java、JAVA3D、Fluid3D、Superscape（VRT）、Vecta3D、Cult3d等，这些技术通常需要安装大小不等且封装性很强的插件来支撑，使得用户体验感降低，系统移植也不灵活[1]。工业设备的三维动画演示都要借助专业的机械建模软件，如SolidWorks、PRO/E、UG等。当建模及演示算法设计好后，演示时都需要依赖三维软件，于是将需要演示的动画录制成视频文件，再在客户面前展示，这种方式造成客户无法体验系统的交互性。因此，人们开始寻求一种开源且免插件并能在不同平台网页中都具有良好渲染与交互效果的展示方法。WebGL的出现克服了传统三维网页技术存在的兼容性差、高成本、高门槛以及专业建模软件的依赖性等缺点，只需借助浏览器就能体验3D交互页面。

增加了新功能的HTML5和具有独特的三维绘图标准的WebGL技术，只需借助于浏览器就可对三维机械模型进行轻松访问和操作。本文研究了三维机械的动画演示，提出了基于WebGL第三方库Three.js的实验系统，用户在客户端便可体会到三维模型逼真的3D效果，具有较高的应用价值[2]。

1 关键技术

1.1 产品展示研究现状

网络产品展示形式有：

（1）购物网站商品展示。购物网站首先将一些普遍的应用进行发布，再将所需展示的产品进行发布，这样用户就可以看到简单且直观的效果图。但是，这种显示存在不足：①网速限制了在网页上商品图片的数量，对于像素较大且清晰度较好的图片显示有一定困难，用户不能很好地了解商品的细节，影响了商品的展示；②所展示的商品角度由展商预先设定，用户无法看到所需角度的产品图片；③ 商家为了突出所展示商品的画面效果，会在特定条件下拍摄，降低了商品的真实感。

（2）视频展示。视频展示是指直接从不同角度将商品以视频的形式展现出来。与图片展示相比，视频表现出的信息量更大，但缺点是所展示商品的信息、主题和背景都由展览商预先设定，很难满足用户的个性化需求。

上述展示方法一般只适用于一些中小型商品，对于机械产品而言，光靠文字、图片介绍产品是不够的。机械产品展示除了注重外观展示外，更加注重的是内在结构、运行状态以及安装操作甚至维修等[3]。

1.2 以HTML5标准为载体呈现三维图像

在HTML5之前，并不是所有浏览器都支持HTML、CSS和JavaScript，这就造成同一个页面在不同浏览器中效果的不同。 HTML5对以前的技术进行总结并添加了一些新的功能，制订出了新的规范，致力于打造一种操作方便、内容丰富、免插件且跨平台性更好的产品，实现各系统平台的无缝链接与交互，目前来看效果相当不错，部分主流浏览器支持HTML5，如 Firefox、 Opera、Chrome、IE9+等 [4]。

1.3 基于WebGL的画面渲染

WebGL本身是一套JavascriptAPI，也是一种3D绘图标准，它将OpenGL ES（OpenGL for Embedded Systems）2.0与JavaScript相结合，借助于HTML5的Canvas元素进行渲染，可以在网页上创建三维复杂场景与模型。与早期Web3D实现相比，WebGL解决了两大关键问题：①WebGL通过Javascript对图像进行宣染，对浏览器插件的依赖小；②WebGL可通过OpenGL ES2.0与底层CPU进行通信，可在大多数平台上运行，兼容性好。此外，WebGL还有如下优势：首先，WebGL解决了网页开发对渲染插件的依赖问题；其次，WebGL可以在大多数浏览器及平台上运行，是开放的，提高了开发效率； 再次，WebGL支持CPU硬件加速，实现三维图形渲染[5]。在生活中，基于WebGL的3D产品无处不在，从三维地图到开源项目，如谷歌地图、腾讯地图、Open WebGlobal等，部分游戏也开始使用此类技术。

依据WebGL规范，通过对底层WebGL图形接口进行简单封装，形成了一个出色的框架——Three.js。它通过掩盖细节来加快开发效率，降低了开发者负担，在浏览器3D效果方面表现也很优异。Three.js提供了三维创建所需的基本元素，如点、线、面、矩阵等，通过将相机（ Cameras）、物体（objects）、光线（lights） 等添加到场景（Scene），借助渲染器（ renderer）进行场景渲染，即可实现基本的网页三维模型展示。Three.js提供了大量的实例及其源代码供开发者研究，可通过逆向工程快速而有效地创建三维模型。

2 基于Three.js的机械展示系统创建

三维场景的基本结构模块如图1所示。

2.1 渲染器设置

定义好场景中的三维模型，并添加好相机之后，通过调用渲染函数使存在于三维空间里的模型以二维平面的形式显现出来。可以将渲染器和Canvas元素进行绑定，并在HTML中定义id的 Canvas元素：

其Renderer相关代码如下：

Var render=new THREE. Render（{

Canvas：document.getElementById（‘MAINCanvas）

}）；

2.2 场景（Scene）设置

场景就是一个很大的三维空间，就像一个很大的容器，没有任何复杂操作，程序开始时即可进行实例化，然后添加模型物体到场景中。相關代码如下：

var scene；

function initScene（）

{

scene = new THREE.Scene（）；

}

2.3 照相机（Camera）设置

在Three.js中照相机设置主要有正投影和透视投影两种方式，其目的是将三维空间里的物体模型映射到二维平面中，正投影中物体模型的大小与视点的距离无关，相反，透视投影中物体模型的大小与视点的距离会呈现出远小近大的现象，而且照相机设置的位置不同，会呈现出不同的视角。值得注意的是Three.js使用的坐标系都是右手坐标系，而且照相机也应该添加到场景中，其相关代码如下所示：

var camera；

function initCamera（） {

camera=new THREE.PerspectiveCamera（70，window.innerWidth/ window.innerHeight， 1， 10000 ）；

camera.position.z= 2000；}

2.4 光源（Light）设置

为了使场景中的视觉效果更好，可通过添加适当的光源来展现相应的主题和效果。为了模型在放大、缩小、旋转时更好地显示，需要多种光源结合，其代码如下：

function initlight （） {

var ambientLight = new THREE.AmbientLight（0xffffff ）；

scene.add（ ambientLight ）；

var directionalLight = new THREE.DirectionalLight（ 0xffffff ）；

directionalLight.position.set（ 0， 1， 0 ）；

scene.add（ directionalLight ）；

var pointLight = new THREE.PointLight（ 0xff0000， 1， 500 ）；

ointLight.position.set（0，0，-200）；

scene.add（ pointLight ）；}

3 三维模型导入

通过HTML脚本即可创建一些简单的三维模型，如正方体、球等规则的几何体，而对于比较复杂的机械装备，以简单几何体组合的方式显然是不切实际的，但Three.js可以导入由3dsMax、PRO/E、UG以及SolidWorks制作的三维模型，通过相关软件将其转化成浏览器可加载的文件格式添加到场景中。模型导入借助不同的加载器，即一系列辅助函数，不同格式的模型对应不同的加载器，常用的几种不同的加载器如表1所示。

这些加载器都遵循同样的原则：

（1） 在网页中包含[NameOfFormat]Loader.js文件。

（2） 使用[NameOfFormat]Loader.load（）函数从URL中加载。

（3） 检查一下传递给回调函数的返回结果，并对它进行渲染[6]。

考虑到本文三维模型是在SolidWorks中建模所得，所以采用OBJLoader.js加载器，而此加载器需要的三维模型格式为.obj。首先在SolidWorks中建模，保存模型格式为.stl，再将模型导入到3DsMax中获得.obj格式的三维模型，加载模型的主要代码形式如下：

var loader=new THREE.OBJLoader（）；

loader.load（'obj/base1.obj'，function （base） {

base.rotation.x=Math.PI*0.5；

base.position.set（-450，450，0）；

scene.add（base）；

}）；

导入模型最终效果如图2所示。

4 模型平移、旋转、缩放

模型的平移、旋转、缩放实际上是借助一些常见的相机操作控件对相机进行操作。当然，除使用控件外，还可通过设置相机的position属性，调用lookAt（）函数改变相机的指向位置来移动相机。在以上研究的基础上借助Three.js框架的轨迹球controls的控制，将加载器OBJLoader.js导入三维模型，便可实现与三维模型的交互，在场景中完成模型的平移、旋转、缩放，选择一个合适的角度及方位详细地浏览三维模型结构。使用TrackballControls之前先创建控件，并绑定到相机上：

var trackballControls= new THREE.TrackballControls（ camera ）；

trackballControls.rotateSpeed = 1.0； //旋转速度

trackballControls.zoomSpeed = 1.2； //变焦速度

trackballControls.panSpeed = 0.8； //平移速度

trackballControls.Zoom = false； //是否变焦

trackballControls.Pan = true； //是否平移

trackballControls.staticMoving = false； //是否有惯性

trackballControls.dynamicDampingFactor = 0.3； //动态阻尼系数，就是灵敏度

更新相机的位置可在render循环中完成。对相机的操作方式如表2所示。

5 3D模型驱动

机械模型可能由于尺寸庞大并且具有相当多的零部件，使一些非本行业的人根本无法想到这些机械模型是如何运动的，所以将这些运行场景集成在网络页面中具有重要意义。合理的网页模型控制，可以很大程度上增强用户体验，增加页面趣味性，减少焦虑感和乏味感[8]。模型本身是静止的，可以通过函数改变其坐标位置和控件，以改变构件运动速度、旋轉角度[9]。

6 结语

本文应用WebGL技术，调用Three.js、OBJLoader.js、TrackballControls.js等加载器，借助OBJLoader.js导入外部建好的模型；通过Three.js自带的渲染器（Renderer）、场景（Scene）、照相机（Camera）、光源（Light）以及着色器功能设置，使3D模型在网页中给人以真实绚丽的3D效果；用TrackballControls.js实现鼠标的操作功能，最终实现网页的3D展示功能，使用户在客户端无需安装任何插件的情况下，完成对三维模型的交互，实现模型的平移、缩放、旋转功能。

在Web3D中，所有动画都是实时渲染的，对CPU和GPU资源的消耗很严重。对于大型的3D场景，要有一定的优化措施。此外，实现平台3D展示功能时，借助WebGL这一较新颖和具有突出优势的3D显示技术，虽然具有不需要安装插件实现3D展示的优点，但也有其局限性[10]，并非适用于所有浏览器。

参考文献：

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

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

[3] 任萱.基于网络的机械产品虚拟展示设计及研究[D].太原：太原理工大学，2013.

[4] 刘爱华，韩勇，张小垒，等.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息，2012（5）：79-81.

[5] 许虎，聂云峰，舒坚.基于中间件的瓦片地图服务设计与实现[J].地球信息科学学报，2010（4）：562-567.

[6] 梁宇澜，唐敦兵，郑力，等.基于Web的机械加工仿真委托服务平台[J].计算机集成制造系统，2002（12）：997-1001.

[7] JOS DIRKESEN. Three.js开发指南[D].李鹏程，译. 北京：机械工业出版社，2015.

[8] 伊卓君.以用户体验为中心的网页交互设计理论探索[J].现代装饰，2011（8）：48-49.

[9] 霍冬，郑伟华，盛步云.基于WebGL的机械产品三维展示技术研究[J].制造业自动化，2013，9（35）：73-77.

[10] 刘阳，张兵，樊凤彬.基于虚拟现实技术的机械产品全景显示系统开发[J].科技资讯，2012，35（8）：1-2.

（责任编辑：杜能钢）