一种基于WebGL的网页端三维模型编辑方法与流程

本发明涉及三维模型编辑技术，特别涉及一种基于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交互函数，加载标准材质库和标准贴图库；

s2.解析模型，通过three.js框架和fbx加载器将第一步产生的fbx文件加载到内存，解析fbx文件中的网格和材质数据并存储到内存，将解析到的网格和材质数据与页面ui函数进行关联，得到解析后的fbx模型；

s3.展示模型，为模型添加基本控制器并通过three.js框架将上述解析模型得到的fbx模型渲染到页面。

所述第三步至少包括：

s1、选中材质，通过鼠标点击模型或材质列表选中单个材质；

s2、替换选中材质，从标准材质库选取对应材质替换选中材质；

s3、修改材质，通过ui对选中材质的属性进行修改，颜色可通过择色板进行修改，贴图可从标准贴图库选择或自行上传，数值可拖拽修改或直接输入修改，修改的同时保存修改信息。

优选地，所述第三步还包括：s4、赋予新材质，多个网格共用一个材质时，右击模型，弹出分离材质ui，点击可对选中网格赋予新材质，这样可将多个网格分别赋予新的材质以便做更细致的材质编辑，赋予的新材质可进行上述s1、s2s3操作。

优选地，所述第三步还包括：s5、修改尺寸，通过修改尺寸ui可对模型原始尺寸进行等比修改。

所述第四步至少包括：

s1、格式化修改数据，将保存的修改信息格式化成json格式数据；

s2、提交数据，通过调用后台服务接口将格式化后的json格式数据提交到后台。

本发明一种基于webgl的网页端三维模型编辑方法,其有益效果有：

1、该模型编辑方法不依赖其它软件或插件，只需浏览器，使用基于webgl的框架three.js加载模型(fbx格式)到三维世界进行展示并读取模型所有材质利用html列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择，使用方便、速度快；

2、该模型编辑方法使用简单、方便快速上手，任何人即使没有任何技术基础也可轻松进行模型编辑；

3、使用主流通用格式fbx，兼容性好。

附图说明

图1，为本发明一种基于webgl的网页端三维模型编辑方法的流程图。

具体实施方式

下面结合实施例对本发明作进一步说明：

实施例

本发明一种基于webgl的网页端三维模型编辑方法，本实施例加载一摩托车三维模型，所述模型编辑方法基于webgl的框架three.js加载摩托车三维模型的motou.fbx文件到三维空间进行展示并读取摩托车模型所有材质，所述三维模型编辑方法包括：第一步、将用于源文件的motou.fbx进行标准化处理；

所述第一步至少包括：

s1.将motou.fbx中的复合材质模型网格按材质进行拆分；

s2.将motou.fbx所有材质转化为标准材质；

s3.为motou.fbx中没有材质的网格赋予新材质；

s4.为motou.fbx中缺失uv通道一的网格生成uv通道一信息；

s5.为motou.fbx添加重置变换，将fbx中点归零；

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

s7.将步骤s6标准化后的motou.fbx文件导出并保存；

s8.对步骤s7导出的motou.fbx文件的模型网格进行减面压缩优化。

第二步、利用javascript程序，通过three.js框架，将第一步产生的motou.fbx文件加载到内存，读取模型数据，并与界面ui关联，然后在支持webgl的浏览器页面中显示fbx模型，包括：

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

s2.解析模型，通过three.js框架和fbx加载器将第一步产生的fbx文件加载到内存，解析fbx文件中的网格和材质数据并存储到内存，将解析到的网格和材质数据与页面ui函数进行关联，得到解析后的fbx模型；

s3.展示模型，为模型添加基本控制器并通过three.js框架将上述解析模型得到的fbx模型渲染到页面。

第三步、通过界面ui对模型进行控制和对材质进行修改，包括：

s1、选中材质，通过鼠标点击模型或材质列表选中单个材质；

s2、替换选中材质，从标准材质库选取对应材质替换选中材质；

s3、修改材质，通过ui对选中材质的属性进行修改，颜色可通过择色板进行修改，贴图可从标准贴图库选择或自行上传，数值可拖拽修改或直接输入修改，修改的同时保存修改信息。

第四步、将修改数据提交到后台进行自动化处理，包括：

s1、格式化修改数据，将保存的修改信息格式化成json格式数据；

s2、提交数据，通过调用后台服务接口将格式化后的json格式数据提交到后台。

该模型编辑方法可进行材质属性修改，通过html元素与三维空间可以实时联动，html元素上进行属性修改会实时体现到三维世界，如改变数值、点击列表元素、替换贴图，而三维世界中的操作也会改变html元素的值，如切换材质。

该模型编辑方法可进行贴图替换及修改，贴图可从本发明提供的标准贴图库中选择或自行上传替换，贴图的旋转和平铺次数可进行修改。

该模型编辑方法可进行模型尺寸修改，可读取模型真实尺寸，并可通过拖拽长、宽、高任意一项进行等比缩放。

该模型编辑方法可进行赋予新材质，如果是多个网格共用一个材质，可为这些网格分别赋予新的材质以便做更细致的材质编辑。

以上已将本发明做一详细说明，以上所述，仅为本发明之较佳实施例而已，当不能限定本发明实施范围，即凡依本申请范围所作一般技术手段的增减或替换，皆应仍属本发明涵盖范围内。