何东琴王聪华龚啸
摘要：应用WbGL技术的Thrs框架为三维网页的开发提供了很好的技术解决方案。Thrs框架的应用可以免去网页3D展示所需要下载渲染插件的麻烦，Thrs框架还可以把三维模型的OBJ格式很方便的加载到网页中来展示。文章探讨了Thrs框架技术，并对网页上展示三维模型进行了分析。
关键词：无插件；三维模型；Thrs；3D展示
中图分类号：TP3文献标志码：A文章编号：006-8228（208）03-8-03
Rsrhplu-lss3DdldstrtdThrs
HDq，WChu，GX
（XzMzuUvrsty，Xy，Shx72082，Ch）
Abstrt：ThThrsrthWbGLthlyprvdsdthlslutfrthdvlptf3DbpsThppltfthThrsrvdthtrublfdldthrdrplu-sdur3DbpdsplyThThrsrlsslyldthOBJfrtf3DdltthbptdsplyThspprdsusssthThrsrthlydlyzsth3Ddldsplythbp
Kyrds：plu-lss；3Ddl；Thrs；3Ddsply
0引言
在互联网的各个领域中，Wb应用的发展和变化是最快的，它已经成为当今网络技术研究的重点。随着网页制作技术的不断发展，网页技术在PC端和移動端也越来越成熟。近年来HTML5规范的逐步落地和WbGL等技术的成熟，通过更加合理的网页技术实现3D网页成为可能。
为了使博物馆、文物馆等藏品拥有一个良好的展示交互平台，游客可以方便地在线观看展品的三维立体效果，实现资源高度共享。目前很多博物馆都建立了三维的网上博物馆，很多博物馆的内部也有专门的设备三维的展示藏品。基于Wb3D的虚拟三维模型近年来得到广泛的应用，但之前的三维模型展示方式需要在客户端浏览器安装一个专门的渲染插件，且编程接口特别复杂。如今使用较多的虚拟现实软件VRP，Vrtls，Uty3D等都需要安装相应的渲染插件[]。
基于Wb3D无插件研究
Thrs是一款基于WbGL的开发框架。它封装了WbGL底层的图形接口，这是调用底层0pGLES图形库的一个接口，从而降低了使用WbGL的难度[2]。Thrs属于HTML5技术的一个分支。它提供了可以直接访问的API，允许在未安装任何插件的浏览器端下进行2D/3D硬件加速渲染。它可以很容易地用来创建各种三维场景包括摄像机、光影、材质等各种对象。WbGL是通过网页中的新型标签对三维模型进行显示。通过增加OpGLES20的一个绑定，WbGL可以提供HTML5Cvs的硬件3D加速渲染，以便Wb开发人员就可以借助系统显卡来[2]。在浏览器里更流畅地展示模型和3D场景。Thrs是一个轻量级的用于在浏览器中创建3D计算机图形图像应用程序的库。Thrs封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染[3]。
2基于Thrs三维模型显示
Thrs是依托网页创建三维物体并显示，thrs可以将二维数据以三维方式呈现出来，三维场景漫游将成为Wb的主要内容，这对Wb的影响是革命性的[4]。在网上展示3D物体，主要包含以下几个方面。
⑴创建三维场景：放置所有物体的空间容器，对应现实的三维空间，其中后续添加的所有物体都是添加到场景中去，它相当于一个大容器。
⑵摄像机设置：在Thrs中，摄像机可以通过两种方式将三维空间中的对象投影到二维空间：透视投影和正投投影。
⑶光源设置：为了更好地展示三维模型中的场景，根据具体的场景模型添加一个适合的光源，烘托出场景主体的美感。
⑷添加渲染：渲染器是3D引擎的核心部分，它完成绘制3D物体到屏幕上的任务。将3D空间中的物体对象映射到二维平面即电脑的显示屏上，这是渲染器的功能，将定义了场景中的物体，设置好相机之后，就可以调用渲染器的渲染函数来渲染整个场景了。
⑸物体模型设置：场景模型可以是Thrs中自带的规则模型，也可以是通过3D建模工具导出的相应的模型文件。Thrs为不同的文件格式提供了许多相应的s文件，使用的时候和相机控件一样先引入htl文件中。本文主要以3DMAX导出b和tl文件加载到场景中进行显示。
⑹加载文件：首先是加载Thrs3D引擎的库文件，即引入Thrs文件。加载b三维模型的时候，可以只加载b文件，然后借助thrs引擎自定义材质对象Mtrl来加载材质；也可以同时加载b和tl文件，此时需要引入OBJLdrs和MTLLdrs文件，MTLLdrs文件封装的构造函数THREEMTLLdr（）用来加载tl材质文件。
⑺网格模型的构建与导入、材质的添加与灯光效果的添加，完成以上四步后，一个三维网页的骨架就己经搭建成功了，之后我们就可以在其中绘制构建网格模型、添加材质以及灯光等效果了。最终完成的效果如图所示。
图OBJ模型最终效果图展示
下面是展示模型的关键部分代码：
//创建场景S
vrs=THREES（）；
//添加方向光
vrlht=THREEPtLht（0xffffff）；
lhtpstst（0，00，00）；
sdd（lht）；
//创建相机
vrr=THREEPrsptvCr
（40，600/400，，500）；
rpstst（00，00，00）；
rlAt（spst）；
//創建渲染器
vrrdrr=THREEWbGLRdrr（）；
rdrrstSz（drWdth，drHht）；
rdrrstClrClr（0xFFFFFF，）；
//将渲染器添加到htl容器中
dutbdyppdChld（rdrrdElt）；
上面我们所做的，不过是静态地往场景里添加元素。如果我们想让元素移动，就需要实现动画。一个简单实现动画的原理是，不断更新屏幕画面，t（）做的就是这个。在t（）里调用rqurAt（t），就能实现画面的循环更新。
futt（）{
//帧动画
rqustAt（t）；
//更新屏幕画面
rdr（）；}
上面提到了THREETrbllCtrls，要使它有效，还需要在t函数里去更新它。我们在rdr（）函数里进行改变物体属性的操作。
futrdr（）{
rdrrrdr（s，r）；}
3性能分析
系统运行的环境：
CPU为Itl（R）Cr（TM）7-6700CPU@34OGHz；
内存为60GB；
显卡：AMDrd（t）r5340x；
操作系统：Wds0企业版64位操作系统；
浏览器：版本630323984（正式版本）（64位）。
4结束语
基于当前Wb3D技术的快速发展，文中针对渲染过程中需要安装插件的麻烦，提出一种无插件的渲染方法，采用WbGL技术，三维模型可直接在客户端浏览器绘制，无需安装任何插件。通过Thrs实现了3D导出模型直接在客户端浏览器进行渲染，但此技术也存在一定的局限性，要求客户端浏览器需要支持WbGL，目前hr、frfx、pr、sfr基本上支持，IE及以后支持展示。为了更好地配置三维场景中各模型的布局，设计了一个三维模型显示平台，可以对场景中所选模型进行移动、旋转和缩放，使其能被更好的观摩。WbGL技术与HTML5结合实现三维网页已经成为一种趋势，此三维模型展示可应用与网站展示、博物馆、校史馆、文物馆的展示等，具有较强的应用价值。
参考文献（Rfrs）：
[]王磊，高环，金野，许华虎基于Wb3D无插件的三维模型展
示的研究[J]计算机技术与发展，2054：27-220
[2]王腾飞，刘俊男，周更新基于Thrs3D引擎的三维网页实
现与加密[J]企业技术开发，2042：79-80
[3]谭文文，丁世勇基于WbGL和HTML5的网页3D动画的
设计与实现[J]电脑知识与技术，2028：698-6983
[4]荣艳冬基于WbGL的3D技术在网页中的运用[J]信息安
全于技术，2058：90-92
[5]王维敏Wb3D技术探索及几种Wb3D技术的比较选择[D]
武汉大学硕士学位论文，204
[6]方强基于WbGL的3D图形引擎研究与实现[D]安徽大学
硕士学位论文，204
[7]刘爱华，韩勇，张小垒等基于WbGL技术的网络三维可视化
研究与实现[J]地理空间信息，2025：79-8
文章来源于：计算机时代