分类：前端

前文已经描述了我们结合了几种优化方案将step文件的多种信息做了转化和提取，接下来将要介绍的tuo-visual的前端模块能读取这些数据做3D渲染和交互应用。我们将分别对tuo-visual前端模块的功能和界面做详细说明。

前端应用的功能分布在2个阶段：加载模型阶段和浏览模型阶段。在加载模型阶段，我们实现的功能主要是针对加载模型时的整体流畅度和模型加载过程的用户交互体验。在浏览模型阶段，我们主要设计的功能是去辅助用户更好的分析和浏览3维零件。

在展开介绍各种功能之前，我们需要先介绍前端应用的3个操作模式：普通浏览模式，移动操作模式和几何体分析模式。

1. 普通浏览模式。这是我们打开应用时首先进入的模式，在此模式下，我们通过3D视图界面可以直接选中一个或者多个独立完整的3D模型，并执行对整个独立模型或分组的操作。
2. 移动操作模式。移动操作模式是通过在普通浏览模式下，选中一个独立的3D对象或分组后，再点击底部工具栏所展开的移动按钮中任意一种移动操作后进入。在移动操作模式下，我们只能对被选中对象做移动操作，并无法再对除了被选中对象外的其他对象做操作。
3. 几何体分析模式。几何体分析模式可以通过普通模式下的几何体分析工具提供的入口进入。在几何体分析模式下，用户不再允许选中独立的3D对象或分组，而是可以选择3D视图中独立的几何特征(点，线和面)。

在后文提到的一些功能或界面操作时，都会提到以上3种操作模式。这里将作为参照供读者参考。

下面我们将对前端应用的功能展开介绍。

得利与tuo-visual系统后端对CAD文件数据的分块解析和存储，我们可以实现实时加载和渲染的功能。这一点对于大型装配体的cad文件来说尤其重要。设想一下，一个有1000+以上零件的装配体，如果等完全加载后才能让用户浏览模型的话，那这个页面的3D浏览部分每次从打开到看得见东西都需要等很长一段时间。我们所提出的“加载实时渲染”就能解决这个矛盾。在tuo-visual系统打开大型装配体时，大体积的零件将会被优先加载过来，并立刻被渲染到3D视图，用户可以立刻执行各种浏览和分析模型的操作。在有一些情况下，可能用户都不需要等到模型加载完就足够用了。（例如，有时候，一些小螺丝，螺母之类的零件根本不是用户本次打开模型的浏览或分析的目标）

下图演示了分步加载实时渲染一个发动机的过程：

尽管TuoVisual文件中的数据在程序运行时能够像gltf一样直接不作任何解释地“灌入”显卡设备，如果用户所打开的模型很大，其加载运算也是十分耗费计算资源的。如果这里不做处理，将很容易导致用户所处页面出现卡顿现象。tuo-visual系统人为的控制了大型模型加载的速度，以此来保证系统所处页面流畅度不受影响，用户可以放心地在模型加载的同时执行分析模型或其他操作。

tuo-visual项目使用了实时加载实时渲染的技术，相配套的，用户有时候需要知道哪一个装配体中哪些子模型已经被加载，哪些子模型还没有加载，更甚至，哪些模型加载失败了。tuo-visual的前端应用提供了很好的响应式界面来实时传递子模型的加载状态。请看如下动图：

上图中左侧树形结构视图，每一条项目的颜色能够标识其所对应零件的加载状态。红色表示未加载，黄色表示正在加载，绿色表示已经加载。当模型加载完毕时，系统会有弹窗提示模型加载完成。如下图所示：

我们知道人类眼睛普遍能接受的最慢更新画面频率大约是24帧每秒，低于这个速度，人们看到的电影或者画面就能感觉到卡顿了。一般设备上在渲染普通模型时都能做到60帧每秒，但当一个设备渲染资源有限（如手机上），或者在渲染一个比较大的模型时，这个设备渲染模型的帧率就达不到60帧每秒了，有时候甚至低于24帧每秒。为了保证用户能在多种设备状态下都能较好的浏览大型CAD模型，在模型加载过程中，tuo-visual将会实时监控设备的渲染状态，一旦发现渲染状态低于一定预警值时，它将会主动关掉剩下未加载部分模型的可视性，以此来保证渲染画面和交互的流畅度。当然，在此之后，用户也可以手动重新打开被关掉的那些模型的可视性。

在普通浏览模式下，很多的操作例如控制可视性，控制视图定位都需要选中一个独立的3D对象。在普通浏览模式下，tuo-visual提供了两个界面来选中3D对象。一个是通过3D视图直接选中对象，一个是通过对象树形结构视图来选中对象。

通过3D视图选择对象的优点是直观，容易理解。而通过树形结构视图来选中对象的优点是可以从结构层面上选择3D对象或者对象分组。这两个视图的都会通过一定ui的效果来表示一个对象被选中的状态。

在3D视图中，tuo-visual的前端应用会用黄色轮廓线来表示一个对象被鼠标hover的状态，并会用绿色外轮廓线来表示一个对象被选中的状态。这些外轮廓能把一个对象被隐藏的轮廓也标识出来，让用户能够更好观察一个对象在整体上所处的空间位置。请看如下动图：

同样我们可以通过树形结构视图来选择对象或分组，树形结构视图与3D视图ui效果也是同步的，请看下图演示：

在移动端的3D视图中做选中操作时，我们通过单指点触屏幕来实现。即在触摸屏上单指点一下屏幕后立刻松开。操作方式如下图所示：

浏览大型装配体时，我们通常需要将一些零件隐藏掉。tuo-visual系统提供了两个方式来控制零件的可视性。第一是通过底部工具栏的形式，第二是通过树形结构视图的控制按钮。在底部工具栏当我们选中过对象时，或者存在被隐藏对象时就会出现一个可视性控制图标，通过此图标展开后的子按钮，即可控制零件的可视性。

下面是通过树形结构视图来操作对象的可视性：

可以看到，通过树形结构视图，我们除了能以一个3D对象为操作单位外，还能以一个分组为操作单位。

浏览大型装配体时，定位视图的浏览角度和中心是非常重要的。tuo-visual为此也提供了直观有效的视图控制方案。

第一，可以通过tuo-visual底部工具栏的视图控制图标所展开的按钮来控制3D视图定位中心。如下图所示：

第二，我们还可以通过3D视图右上的小立方体控件来控制视图方向。操作示例如下图所示：

浏览大型装配体时，为了更好的分析装配体结构，用户时常需要移动一些零件的位置。tuo-visual前端应用允许用户在移动操作模式下可以通过鼠标或者触摸屏做装配体的拆解操作：

触摸屏下操作也十分便利：