[发明专利]一种基于WebGL的网页端三维模型编辑方法

说明书

本发明涉及一种基于WebGL的网页端三维模型编辑方法，该方法至少包括：第一步、将用于源文件的FBX进行标准化处理；第二步、利用JavaScript程序，通过three.js框架，将第一步产生的FBX文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型；第三步、通过界面UI对模型进行控制和对材质进行修改；第四步、将修改数据提交到后台进行自动化处理。该编辑方法基于WebGL框架three.js加载模型fbx格式到网页端三维空间，读取模型所有材质并利用HTML列表元素进行呈现，模型在三维空间可进行旋转、缩放、按材质选择及按网格选择，因而使得模型编辑方便。

技术领域

本发明涉及三维模型编辑技术，特别涉及一种基于WebGL框架three.js加载模型fbx格式到三维空间、方便编辑的网页端三维模型编辑方法。

背景技术

随着社会和科技的进步，信息展示和交流慢慢从文字、图片和视频向三维甚至多维转变，从而衍生了大量新的技术，如虚拟现实(VR)、增强现实(AR)、混合显示(MR)等,而这些技术又离不开三维模型，三维模型创建后不一定能适应任何地方任何情况，而要解决这个问题，就离不开模型编辑，对于Web网页,现有三维模型的显示和编辑存在很多不足：

1、模型显示不方便，在Web上进行三维展示需要借助flash或其他插件，从而很容易造成加载速度慢，显示不顺畅；

2、三维文件格式繁多，兼容性差，目前三维软件各有各的标准，从而导致三维文件格式也五花八门，如fbx、obj、dae、gltf/glb等；

3、编辑不方便，需要借助第三方软件，目前模型编辑比较通用的方案是将模型导回到制作软件进行修改编辑(如3DMAX、Maya、Blender、C4D等三维建模软件)，编辑完再导出相应的格式使用。

发明内容

本发明的目的是为了解决上述技术问题，提供一种基于WebGL的网页端三维模型编辑方法，该编辑方法基于WebGL框架threejs加载模型fbx格式到网页端三维空间，读取模型所有材质并利用HTML列表元素进行呈现，模型在三维空间可进行旋转、缩放、按材质选择及按网格选择，因而使得模型编辑方便。

为了解决上述现有技术问题,本发明的技术方案是:

本发明一种基于WebGL的网页端三维模型编辑方法，所述三维模型编辑方法至少包括：第一步、将用于源文件的FBX进行标准化处理；第二步、利用JavaScript程序，通过three.js框架，将第一步产生的FBX文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型；第三步、通过界面UI对模型进行控制和对材质进行修改；第四步、将修改数据提交到后台进行自动化处理。

所述第一步至少包括：

S1.将FBX中的复合材质模型网格按材质进行拆分；

S2.将FBX所有材质转化为标准材质；

S3.为FBX中没有材质的网格赋予新材质；

S4.为FBX中缺失UV通道一的网格生成UV通道一信息；

S5.为FBX添加重置变换，将FBX中点归零；

S6.将FBX中网格和材质进行统一命名，统一命名后的每个网格和材质的名称具有唯一性；

S7.将步骤S6标准化后的FBX文件导出并保存；

S8.对步骤S7导出的FBX文件的模型网格进行减面压缩优化。

所述第二步至少包括：

S1.初始化，初始化浏览器页面和three.js环境，添加UI交互函数，加载标准材质库和标准贴图库；