基于WebGL的汽车3D展示系统的创建

摘 要随着浏览器变得强大，现在大部分的浏览器不仅可以创建二维图形和应用，可以充分利用GPU，创建漂亮的、高性能的三位应用。本文就基于WebGl技术下进行的汽车3D展示系统开发的一些关键问题进行了阐述和说明。

【关键词】WebGL three.js 3D展示

在互联网的各个领域中，发展和变化最快的就是Web应用的发展。随着人们对网页体验的要求不断提高，网页正在逐渐地从传统的二维平面网页向交互式三维网页发展。

普通的Web浏览器正日益成为能应用丰富3D交互式程序的一个平台。2014年10月，万维网联盟完成了HTML5的标准制定。它通过JavaScript脚本实现Web交互式三维图形制作程序的设计与实现，无需任何浏览器插件支持，它利用底层图形硬件的加速功能功能的图形渲染，是通过统一的、标准的、跨平台的OpenGL ES2.0实现的。

1 基于WebGL的汽车3D展示系统的创建

1.1 本地库

Three.js是一款WEBGL库，它在处理浏览器3D效果方面表现优异。通过它可以创建镜头，物体，光线，材质等，还可以选择渲染器：使用HTML5的Canvas来绘制场景，也可选择使用WEBGL或是SVG来渲染。另外它还是开源的。尽管Three.js有种种好处，但是需要耗费大量时间研究实例，做逆向工程，搜寻具体的函数，偶尔还需要通过GitHub需求帮助。数据会通过HTML中的JavaScript接口进行载入。

1.2 汽车模型的实现

汽车模型的实现就是把三维物体显示出来的过程。通过3DMAX进行模拟。调制完成后导出OBJ文件加载到Three.js中。全部转成JS文件来处理。最后得到与真人最相似的汽车模型。

1.3 汽车纹理的实现

UV分解完成，将UV导出成一张线框图，它定义了图片上每个点的位置的信息，这些点与3D模型是互相联系的，已决定表面纹理贴图的位置。就好像虚拟的”创可贴”，UV就是将图像上每一个点精确对应到模型物体的表面，通过不断的调试达到最仿真的纹理。

1.4 汽车的渲染和相机

在场景中调用每个照相机的渲染方法。当在进行渲染时，会调用每个组件的渲染放大。当对MeshRender组件来进行渲染时，想绑定材质及着色器，然后在绑定网格对象，为了加速渲染，需要绑定对象，这意味着对两个同样材质和网格的对象进行渲染。相机是底层渲染的重要组件，每个相机都维护者一个layerMask属性。将每个汽车对象与layerMask属性相匹配，从而确定组件可渲染的。

2 基于WebGL的3D汽车展示系统的功能实现

2.1 汽车的选择

首先创建汽车类型CARS，

页面初次加载时用load（）方法loader.load（ CARS[ "veyron" ].url， function（ geometry ） { createScene（ geometry， "veyron" ） } ）；

点击汽车库的按钮后会出现一个汽车类型列表，点击任一个汽车类型通过调用switchCar（）方法来改变显示的汽车

2.2 颜色的选择

在创建汽车类型后给每个汽车类型加入相应的一些颜色例如CARS["gallardo"].materials={body：[["Orange"，mlib[ "Orange" ] ]

]}；点击颜色库按钮同样会弹出颜色库，不过不同的汽车类型都有其特有的颜色，若汽车改变，通过刚刚说的在创建汽车类型的时候就加入的颜色绑定颜色库里的颜色也会不同，在点击任一颜色的时候通过调用attachButtonMaterials（）方法来变换汽车的颜色。

3 结束语

在现在的时代，人们对2D的视觉效果已经开始有了”腻”的滋味，从而对3D的效果充滿的期待。而WebGL和three.js技术的出现，使人们能够轻而易取的在网页上看到3D的效果，并且有一种身临其景的感觉，而WebGL技术免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，实现3D效果。

参考文献

[1]Tony parisi.HTML5与WebGL编程[M].北京：人民邮电出版社，2015.

[2]Jos Dirksen.Three.js开发指南[M].北京：机械工业出版社，2015.

作者简介

李连民（1979-），男，现为河南科技大学软件学院讲师。研究方向为软件架构、网络安全。

翟阳阳（1996-），男，现为河南科技大学软件学院本科生。研究方向为软件开发。

作者单位

河南科技大学软件学院 河南省洛阳市 471003