基于开源Web 3D引擎的三维系统的开发

基于开源Web 3D引擎的三维系统的开发
摘要：应用Web3D引擎开发的计算机仿真系统或虚拟现实系统均需在Web浏览器上运行，需要其能快速下载和运行，并且尽量不需下载特定插件。

采用基于JA V A技术的开源Web3D引擎开发的三维系统可以满足上述要求，开发的展示系统可以实现三维图形的旋转、缩放等交互功能。

此外，在系统开发过程中对引擎中不完善的部分进行了必要的修正。

关键词：计算机应用；Web3D引擎；三维系统；交互；JA V A 技术
本文提出了基于开源代码的Web3D引擎，开发交互式产品展示系统的方法，并以陶瓷产品为例，开发了一款基于开源Web3D引擎idx3D，具有交互功能的三维陶瓷产品展示系统，该系统的运行无需下载特定的插件。

1开发步骤
根据Web3D引擎idx3D中经修改后的各类的属性和方法，总结了以下的开发步骤：
（1）为所开发的系统建模。

系统需要先建立模型，才能对相应对象进行交互式处理。

由于idx3D引擎中没有建模的功能，需要借助其他建模工具实现建模。

（2）构造场景。

系统中，摄像机、光源以及物体等各类对象都要置于场景中予以管理和操作，因此首先要构造场景。

（3）加入材质和灯光。

在场景中需要加入相应的材质和灯光。

（4）将模型文件导入程序中。

导入的物体模型添加到场景中。

（5）重构场景，以及场景规格化。

由于场景中添加了材质、灯光以及物体模型等内容，需要将这些对象重构成新的场景，并对场景进行规格化操作。

（6）初始化渲染状态。

对重构后的场景进行渲染，此时是静止状态，并没有交互式的操作。

（7）设置旋转和缩放矩阵，实现旋转和缩放。

对步骤（6）的场景进行旋转和缩放的交互式操作的实现。

（8）进行渲染得到具有三维效果的交互式系统。

将步骤（7）所完成的能缩放和旋转的场景进行渲染最终实现交互式三维展示系统。

2应用案例开发
2.1开发系统的简介
应用基于JA V A技术的Web3D开源引擎idx3D，开发了一款陶瓷产品——茶壶的三维展示系统。

所开发系统的功能如下：①可以根据用户的需求建立茶壶的模型；②可以自由设置茶壶的花纹和材质；③通过鼠标的移动，可以实现对茶壶对象的旋转操作；
④通过键盘的操作，可以实现对茶壶对象的缩放操作。

具体来说，按动键盘上‘w’字符，茶壶对象会放大，按动键盘上‘s’字符，茶壶对象会缩小。

2.2具体实现
2.2.13D建模
用Autodesk的3D’s Max工具，为茶壶进行建模，再进行贴图建模和贴图完成时的截图如图1所示。

建模完成后，生成.max文件。

由于Web3D引擎idx3D的要求，需要导出一个.3ds 文件，和一个用于贴图的.png图像文件。

2.2.2代码的实现
本节中主要介绍开发流程的实现，以及主要部分的方法调用等内容，代码的流程如图2所示。

主要介绍了4个图13DSMax 建模截图
函数：init( )、update( )、mouseDrag( )和keyDown( )。

从功能上看init( )函数主要实现了对整个系统的构建，update( )函数实现对场景的渲染以及描画到显示器的相应窗口即applet中mouseDrag( )函数主要实现了鼠标操作的功能即对物体旋转的操作，keyDown（）函数主要实现了键盘操作的功能即缩放功能。

在public void init( )中，主要进行了该系统的初始化处理，即3中介绍的开发步骤的具体实现，包括：
（1）构建场景：用new idx3d_Scene( )语句创建场景对象，参数为场景的大小尺寸。

（2）为场景添加材质和灯光：①调用addMaterial( )方法，为场景添加材质。

根据材质的不同指定不同的参数；②调用setAmbient( )和setBackgroundColor( )这两个方法，为场景添加灯光和背景颜色。

(3)导入建好模型的.3ds文件：用new idx3d_3ds_Importer( ).importFromURL( )语句创建导入文件对象，参数为所建模型.3ds文件的路径和场景的对象。

(4)重构场景和场景的规格化：①重构场景时，场景对象scene 调用rebuild( )方法，将材质（Material）和对象（Object）生成对象数组；②对场景规格化时，场景对象scene调用normalize( )方法来实现规格化。

(5)重置场景矩阵：由于场景和对象都在本地空间下建模，在规格化之后需要将场景和对象在本地空间下的坐标转化为世界空间下的坐标，进行重置场景矩阵的计算，具体实现通过语句scene.matrix.reset( )。

(6)设置摄像机的位置，建立视图空间：将摄像机的位置设为点（0，0，-100），设置摄像机位置的语句为场景对象scene调用相应方法，scene.defaultCamera.setPos(0,0,-100)。

修饰类型为public、无返回值的同步方法update，其参数为Graphics类型的对象g，即public synchronized void update(Graphics g)中，进行两个操作：
(1)将连同对象在内的整个场景渲染到一张图片中，场景对象
scene调用render( )方法。

render( )中是调用了renderPipeline中的render(this.defaultCamera)方法，参数为默认摄像机。

这一部分是将连同三维图形在内的三维场景，转化为具有三维效果的二维图像，下一步是将这个图像描画在applet上。

(2)将渲染好的图片画到屏幕上，此处实例化Graphics对象g，调用drawImage( )方法在applet上进行描画。

在public boolean mouseDrag(Event evt,int x,int y)中，场景对象scene调用rotate( )方法，进行旋转处理。

rotate( )方法在Scene.java继承自的CoreObject.java中定义，rotate( )方法实现旋转的具体思路为：分别计算绕x轴，y轴和z轴旋转时的变换矩阵，再相乘而得到一个变换矩阵，再进行渲染。

在public boolean keyDown(Event evt，int key)中，场景对象scene调用scale( )方法，进行缩放处理。

scale( )的参数分别是zoomIn( )方法和zoomOut( )，放大时参数为zoomIn( )方法，缩小时参数为zoomOut( )方法。

zoomIn( )与zoomOut( )的作用类似，都是用来计算缩放比例的方法，zoomIn( )用来计算大于1的比例，zoomOut( )则用来计算小于1的比例。

scale( )方法实现缩放的具体思路是：通过zoomIn( )方法或zoomOut( )方法计算出来的缩放比例计算相应的变换矩阵，再进行渲染。

图2代码实现的流程图
图3是这个三维展示系统的运行结果，若需要将该系统在浏览器上运行，只需将该applet加载在HTML网页上即可。

图4
是用鼠标对三维图形进行旋转操作的截图，图5是按键盘的‘w’键对三维图形进行放大操作的截图，图6是按键盘的‘s’键对三维图形进行缩小操作的截图。

3结束语
本文在对比了几种3D技术的基础上，介绍了开源Web3D 引擎idx3D的具体实现，以及对原引擎的优化。

在此基础上，明确了基于开源Web3D引擎开发系统的流程，以及具体开发方法。

最后，提供了一个茶壶展示系统的开发实例，该实例的运行无需下载特定插件。

图3三维系统的运行结果图4三维图形的旋转操作
图5三维图形的放大操作图6三维图形的缩小操作
参考文献：
[1]罗立宏,谭夏.几种Web3D技术及比较[J].甘肃科技,2007(5).。