网页前端的Tribon三维模型展示技术分析
By Eattonton
前端技术也就是网页程序的开发技术统称，通过前端的插件可以开发报表，图纸，三维模型等种种功能。并且这些功能可以利用网页的跨平台和实时性的技术优势，从而让数字信息更好的传递。下面从技术角度讲一下Tribon三维模型的网页展示技术方案。
1.技术分析
整个网页设计采用MVC模式，MVC是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：Model（模型）表示应用程序核心（比如数据库记录列表）；View（视图）显示数据（数据库记录）；Controller（控制器）处理输入（写入数据库记录）。当然我们这里不涉及数据的写入，只实现前面的两个模块。在M层(数据读取层)，我们采用TriWeb.cn的TWOCC技术从Tribon的底层数据库中读取三维模型；在V层(展示层)利用Three.js插件和EasyUI分别实现三维展示和Explorer模型浏览器。
2.M层
TriWeb网站是国内Tribon爱好者几位船舶工程师共同创建，也可以称为Tribon on Web，该网站把Tribon设计的数据直接展示到网页端。这个网站也提供很多的接口供设计者开发。 其中LoadHPanSTL.ashx(具体地址: http://www.triweb.cn /modelshow/LoadHPanSTL.ashx?pname=panelname)可以实现一个平面板架的三维模型获取。该三维模型以STL的二进制流传输到客户端，LoadHPanSTL.ashx后台利用了TWOCC基于OCC开源框架的图形计算。我们利用这个程序接口实现模型数据的获取。
3.V层
首先，我们需要做一个Explorer模型浏览器。利用前端的EasyUI的Tree插件，进行创建。依据Design->Block->HPANEL的层级进行划分。利用TriWeb提供的LoadHPanNameList.ashx (具体地址: http://www.triweb.cn /modelshow/ LoadHPanNameList.ashx )获得以JSON格式的板架和分段的列表。如下：
[{
"id":1,
"text":"Design",
"children":[{
"id":2,
"text":"BLOCK F01",
"children":[
{"id":4,"text":"HPANEL PAN_1"}
]
},{
"id":3,
"text":"BLOCK F02"
}]
}]
Tree插件绑定上面的JSON数据之后，就可以显示一个Tree型的Explorer模型浏览器:
使用Three.js进行三维模型的展示，由于TriWeb.cn提供的是STL格式的模型数据流，我们就需要用THREE.STLLoader()这个对象进行Load。下面就是一个做的程序的展示图。
这样一个模型的显示程序就完成了。虽然，没有粘贴代码，但是，把整个程序的设计思路和所用的技术进行了说明。整个代码并不复杂，有兴趣的可以自己试试。
4.小结
基于浏览器技术的前端技术已经能够满足工程设计的需要，尤其是当下HTML5标准的统一和前端插件的成熟。很多以前PC端的程序都能在网页中实现。相比PC端的程序，网页的程序可以在多平台中使用，可以是手机，PAD等移动设备。而且数据的实时性很高，可以随时的获取信息。这很适合当下告诉发展的工程对信息化得需要。