基于Web3D的三维模型顶点编辑方法

乔 磊

(上海工程技术大学 电子电气工程学院， 上海 201620)

0 引 言

三维模型具有真实、直观、全面等优点，可以提供更生动的视觉体验[1]。随着计算机技术的发展，三维模型已被广泛应用于工业制造、医疗、教育、商业娱乐等诸多领域[2]。三维模型的获取途径中，通过三维建模软件创作和生成模型仍然是最主要的方式。例如3D游戏人物或影视CG角色等都来源于此；即使是来自三维扫描或三维重建的数据，在实际应用中也可能需要通过建模软件进行修复或处理[3]。目前，常用的三维建模软件有3Dmax、ZBrush、 Blender等，针对不同应用领域或行业需求，不同软件在功能、操作细节等方面都各有针对性与独特优势。但出于功能全面性考虑，此类软件通常都需要通过数据体量较大的安装程序进行安装。

在实际生活中，有时候仅需对三维模型进行工作量较小的局部修改操作，在大体量的建模软件中修改对设备和地点等都存在一定限制，某些情况下不能随时随地反馈和跟进。而通过Web端应用在线完成，可以不限制环境或设备，甚至通过移动设备就可以快速做出处理。同时，随着Web技术的快速演进，Web应用跨平台低成本的优点使得桌面应用转向Web应用成为一种新的发展方向，硬件设备的发展也保证了Web应用有足够的计算和处理能力。随着WebGL标准的制定与开发，诸多Web3D应用得以落地[4]。面向Web环境的三维可视化及三维交互功能的实现变得更为容易，也使得Web端三维模型顶点编辑成为可能[5]。在Web环境中进行三维模型编辑已经存在一些案例，但这些案例中的编辑只限于操作模型整体的位移、旋转、缩放，而模型编辑的核心功能，即对顶点的编辑并未得到实现[6]。因此，本文提出一种Web环境下的三维模型编辑方法，可以快速完成轻量级的三维模型处理。

Three.js框架库是对WebGL的API的进一步封装，本文以此为基础，实现Web环境下的三维模型顶点编辑。首先，在分析三维数据结构的基础上，通过顶点可视化与顶点交互驱动几何体更新实现了三维模型顶点编辑，基于此对编辑记录及撤销方法进行了说明；其次，对多种三维格式数据的导入与导出方法进行了说明，以支持对外部三维模型的修改。通过在不同格式的三维模型数据中进行顶点编辑，验证了Web端模型编辑的可行性。

1 技术背景

1.1 三维模型的网格表示

多边形网格表示是三维模型最常用的表示方法，该方法通过一系列多边形的集合对物体表面进行描述，由多边形围成的区域来定义模型的外形和位置[7]。三角形网格由于结构简单、易操作、易处理等优点，成为应用最广泛的网格形式。三角网格的表示由顶点集合V和三角面集合T组成。如图1所示，在一个三维模型中，各顶点的空间坐标v构成了集合V，各三角面的拓扑信息f构成了集合T，集合V和T共同构成了该模型的三角网格表示。

图1 模型的三角网格表示

Web3D场景中的网格都属于三角网格。顶点编辑是在网格上进行的，其本质是对网格顶点的空间坐标的修改。

1.2 Web3D网格数据结构

在Three.js中，网格(mesh)是由几何体(geometry)与材质(material)等属性构成的。其中，材质决定网格表面的视觉效果，几何体决定网格的形状。几何体的主要属性见表1。顶点编辑的本质就是修改几何体中的顶点信息。

表1 几何体属性

2 关键技术与实现方法

2.1 顶点编辑

网格顶点编辑的目的是该改变网格的形状，其本质是对网格顶点的空间坐标进行修改，需要将这一过程转化为可视化的交互事件。因此，将顶点编辑的实现分为两个部分，一是通过解析几何信息创建可视化的顶点对象；二是将顶点对象交互事件转换为模型的形体更新。

2.1.1 顶点对象的创建

顶点对象是对顶点的可视化，同时也是用户交互的载体，应该具有以下特性：

(1)与网格顶点一一对应；

(2)支持独立交互。

依据Web3D中网格的数据结构，顶点坐标集合数组中每3个相邻元素表示一个顶点，因此，可通过遍历该数组生成顶点对象。

顶点对象的视图可基于Web3D中的网格(mesh)或精灵图(sprite)实现，网格和精灵图在变换控制器(TransformControls)下的交互视图如图2所示。由于精灵图属于二维表示，其性能消耗低于三维网格，因此将顶点对象渲染为精灵图。

(a) 网格 (b) 精灵图

根据顶点坐标数组创建顶点交互对象的步骤：

Step1定义变量target= 0，以指示当前顶点信息在数组中的位置，同时初始化顶点对象列表；

Step2访问顶点坐标集合数组，自下标target×3始，依序获取3个元素x、y、z，构建三维空间坐标pos(x,y,z)；

Step3创建精灵图对象添加至3D场景，设置其空间位置为pos，将该对象加入顶点对象列表；

Step4将变量target加1，判断顶点数量是否大于target，若条件成立，则跳转至Step 2，否则创建结束。

2.1.2 顶点交互驱动的模型更新

创建顶点对象后，为其添加移动事件，并将移动引起的位置变化转换为对应顶点的空间坐标变化，以驱动模型形状的更新。在Web3D场景中，通过变换控制器可以对三维物体进行移动，切换变换控制器的操作对象，即可达到控制不同顶点的目的，结合射线拾取方法，实现鼠标选择目标顶点和顶点移动更新模型的可视化顶点编辑。

射线拾取的原理如图3所示，从观察点P0位置向鼠标位置P1生成一条射线，射线与场景中的物体交于点P3。射线穿过的所有三维物体将被保存在数组中。

图3 射线拾取

通过鼠标选择目标顶点时，先创建射线对象，在鼠标移动时对射线的方向进行更新，当鼠标移动至某个顶点对象上时，可从被拾取物体数组中获取该顶点对象；在目标顶点对象所在的位置显示变换控制器辅助工具，同时切换控制器的操作对象为当前目标；当鼠标从顶点对象上移开时，则移除控制器的操作对象，同时隐藏辅助工具。

变换控制器允许对目标物体进行任意方向的位移。在每次位移时对网格几何体进行更新，当某个顶点对象发生移动时，网格模型更新的步骤为：

Step1在顶点对象列表中查找当前受控顶点对象的次序；

Step2根据次序在顶点坐标集合数组中访问受控顶点信息，将其坐标替换为当前受控顶点对象位移后的新坐标。

根据顶点对象的移动更新几何数据后，在下一帧渲染执行时就会显示最新的模型形态。

2.2 编辑操作的记录与撤销方法

已执行的顶点编辑操作应该允许撤销。撤销操作的效果是使网格恢复到编辑前的状态，需要以已执行的编辑操作为依据，因此，编辑撤销的实现可分为编辑记录和撤销方法两部分。

2.2.1 编辑记录

编辑记录的目的是有效保存编辑引起的变化，并为撤销操作提供依据。在一次顶点对象的移动中，受影响的包括被移动的顶点对象和被更新的模型，并且产生的影响仅体现在顶点的空间坐标变化上。因此，一条编辑记录只需保存目标网格、目标顶点对象及其移动前的位置3个信息。基于此，给出编辑记录的数据结构见表2。

表2 编辑记录的结构

选择数组作为编辑记录的存储结构。在每次顶点对象移动时，插入新的编辑记录。为了保持几何体的实时更新，顶点对象移动的响应事件触发是即时的，而编辑记录不需要即时性，只需要在每次移动结束后进行记录的插入。

2.2.2 编辑撤销

编辑撤销的目的是将最近一次操作的顶点对象恢复到移动前的位置，并恢复其对应的顶点位置。因此，撤销操作可以看作对指定顶点对象进行指定移动位置的一次编辑，编辑撤销的步骤为：

Step1若编辑记录不为空，从其中取出最后一条记录，否则不做任何操作；

Step2依据取出的记录，在目标模型中查找目标顶点对象，修改其空间位置为编辑前坐标。

Step3同顶点编辑操作，修改目标顶点对象对应的顶点坐标并更新几何体，删除当前编辑记录。

通过上述方法，可以更灵活地进行模型顶点的编辑操作。

2.3 三维数据获取与导出

2.3.1 数据导入与可编辑对象查找

常见的三维数据有.gltf、.fbx、.obj、.stl等格式，Three.js提供了针对不同格式的加载器，以此为基础可实现模型数据的导入。在初始化页面时，实例化各类型加载器，在文件导入时可依据文件格式切换加载器类型，实现多格式兼容导入，同时避免了加载器的重复创建。

不同格式的三维文件在导入后的数据结构存在差异，其中，几何体(geometry)和网格(mesh)为可编辑对象，场景(scene)和组合(group)为包含多个可编辑对象的集合。针对该差异性，递归地访问导入的三维数据，查找几何体或网格类型的对象,并将其添加到可编辑对象列表，该流程如图4所示。

图4 可编辑对象查找流程

2.3.2 数据导出

同三维文件导入类似，数据的导出可基于Three.js提供的文件生成器实现。在页面初始化阶段实例化生成器对象，执行导出操作时，将待导出的数据作为参数传入生成器中，即可获得编辑后的模型文件。

3 实 验

在顶点编辑方法基础上搭建Web三维模型编辑系统，系统界面如图5所示。分别将不同类型的外部数据导入系统，对查找到的网格进行顶点编辑，最后将编辑后的模型导出，验证Web顶点编辑的效果。

图5 Web3D模型编辑系统界面

将.stl格式的“布料”模型导入场景，如图6所示。三维视图如图6(a)所示；创建可视化顶点对象以及模型的网格视图，如图6(b)所示；通过鼠标选中待编辑顶点，在顶点对象上显示的控制器，如图6(c)所示；通过控制器操作，对“布料”模型的局部顶点进行编辑，并将其导出为新的模型，编辑前后的对比如图6(d)所示。

图6 “布料”模型的编辑

将.gltf格式的多网格组合模型“卡通男”导入场景，其基础三维视图如7(a)所示；从导入数据中查找到的可编辑对象显示在图7(b)的模型列表中；选择其中一个网格进行编辑，其编辑视图如图7(c)所示。

图7 “卡通男”模型的导入

对网格的袖口区域进行顶点编辑后，模型的视觉对比如图8所示。在编辑过程中，生成的顶点编辑记录如图9所示，记录显示了编辑操作的顶点对象和原始位置，能够有效支持编辑的撤销。

图8 “卡通男”模型局部编辑

图9 编辑记录

从上述不同类型数据的编辑操作可以看出，Web3D顶点编辑可以支持多种类型的三维数据操作，在可编辑网格的查找、顶点可视化与交互更新方面都能有较好的效果，可以作为Web在线三维建模的基础。

4 结束语

本文基于Web3D实现了Web三维模型顶点编辑方法。通过可视化网格的顶点对象，以及顶点对象的交互事件，实现了Web环境下的鼠标交互式模型编辑；结合外部三维数据的导入与导出，可以进行在线的轻量级三维模型修改，为Web三维建模提供了基础。但本文方法未能实现对顶点的批量操作，且顶点对象的交互单一，可以执行的操作有限，区域性顶点选择、多顶点操作等都是后续工作的目标。另外，控制器的操作也可以进一步抽象化，将顶点可视化与交互分离，提升顶点编辑效率，也是本文方法的改进方向。