[发明专利]一种基于WebGL的三维模型显示方法

说明书

本发明提供一种基于WebGL的三维模型显示方法，三维模型显示方法基于WebGL的框架Three.js加载三维模型fbx格式到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述三维模型显示方法至少包括步骤：第一步、将模型文件转换为自定义的json格式文件,所述json格式文件至少包括json格式模型文件、json格式贴图文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示。该编辑方法读取模型所有材质并利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择。

技术领域

本发明涉及三维模型显示技术，特别涉及一种基于WebGL框架Three.js加载模型fbx格式到三维世界、显示方便、编辑灵活的用于网页的模型显示方法。

背景技术

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

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

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

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

WebGL是一种3D绘图标准，该绘图标准允许将脚本语言Javascript与着色语言GLSL结合在一起，且WebGL已经在各主流浏览器上支持。WebGL的出现使得在浏览器上展示三维效果不再需要浏览器插件的支持，其直接利用底层的硬件加速对图形进行渲染，为开发人员提供了与传统三维桌面应用同样高效的图形渲染速度，本发明利用这一技术的特点，提出一种采用Three.js开源框架基于WebGL的三维模型显示方法。

发明内容

本发明的目的是为了解决上述技术问题，提供一种基于WebGL的三维模型显示方法，该显示方法基于WebGL框架Three.js加载模型fbx格式到三维世界，读取模型所有材质利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择。

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

本发明一种基于WebGL的三维模型显示方法，所述三维模型显示方法基于WebGL的框架Three.js加载三维模型fbx格式文件到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述三维模型显示方法具体包括以下步骤：第一步、将模型文件转换为自定义json格式文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示，且基于HTML5的编程约定。

进一步的,所述自定义json格式文件包括：

网格json文件，含顶点位置，法线，面，uv，蒙皮权重与索引，对顶点数大于65535的单网格进行切割处理，对所有数据精度与密度进行优化；

材质json文件，含材质数据与关联数据；

动画json文件，含动画属性以及时间信息；

贴图txt文件，含图片base64编码数据以及材质关联数据json格式贴图文件。