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

权利要求书

1.一种基于WebGL的三维模型显示方法，其特征在于，三维模型显示方法采用将三维模型文件进行标准化处理；在超文本标记语言HTML编辑的浏览器页面进行三维模型显示。

2.根据权利要求1所述的基于WebGL的三维模型显示方法，其特征在于，所述三维模型显示方法基于WebGL的框架Three.js加载三维模型到三维空间进行展示并读取模型所有材质，并利用HTML技术布局界面交互UI，所述标准化处理是将三维模型文件保存为fbx格式的文件，所述三维模型显示方法包括以下步骤：第一步、将三维模型的fbx格式文件转换为自定义json格式文件；第二步、利用JavaScript程序，根据第一步所得json格式文件，在支持WebGL的浏览器页面中显示。

3.根据权利要求2所述的基于WebGL的三维模型显示方法，其特征在于，所述自定义json格式文件包括：

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

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

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

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

4.根据权利要求3所述的基于WebGL的三维模型显示方法，其特征在于，所述网格json文件、材质json文件、动画json文件均采用Gzip压缩格式存储。

5.根据权利要求4所述的基于WebGL的三维模型显示方法，其特征在于，所述第一步具体包括：

S1.对FBX模型文件进行数据结构分析；

S2.对可合并的网格进行合并操作，优化网格数据；

S3.生成自动展UV数据，原始UV数据保存到UV2通道；

S4.通过烘焙生成模型的ambient occlusion map，light map以及nomal map贴图数据；

S5.提取模型文件中的材质信息，形成材质渲染数据；

S6.提取模型文件中的动画信息，形成动画数据；

S7.以顶点信息数组、法线信息数组、UV信息数据、模型构件三角面片索引数组，动画数组，生成json格式模型文件；

S8.通过纹理信息数组生成多个json格式贴图文件，包含低精度贴图文件，高精度贴图文件，环境贴图文件以及光照贴图文件。

6.根据权利要求4所述的一种基于WebGL的三维模型显示方法，其特征在于，所述第二步具体包括：

T1渲染前准备，在浏览器页面中新建空的缓冲区对象，初始化three.js框架；

T2初始化对象，通过AMRTLoader.js解析json格式网格文件，生成网格数据、UV数据、动画数据、材质数据，在场景中加入模型，该模型为无贴图模型；

T3解析动画，在模型加载完成后，对动画数据进行解析，生成AnimationClip数组，并缓存；

T4解析贴图，在动画解析完成后，开始加载低精度贴图数据，并赋予相关材质低精度贴图信息，此时显示的为完整模型，低精度贴图加载完后，加载高精度贴图和环境贴图，并赋予材质高精度贴图信息和环境贴图信息，最后加载光照贴图文件，将烘焙的光照还原到模型上。