CN109753334A - 一种基于WebGL的三维模型显示方法 - Google Patents

Abstract

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

Description

一种基于WebGL的三维模型显示方法

技术领域

本发明涉及三维模型显示技术，特别涉及一种基于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格式贴图文件。

进一步的，网格json文件、材质json文件、动画json文件均采用Gzip压缩格式存储，可以大比例的压缩文件大小，该压缩方式的解压被浏览器默认支持，极大地提高传输速度。

进一步的，所述第一步具体包括：

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

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

S3.生成自动展UV数据，UV是指U、V纹理贴图坐标的简称，原始UV数据保存到UV2通道；

S4.通过烘焙生成模型的ambient occlusion map(环境闭塞贴图)，light map(光照贴图)以及nomal map(法线贴图)贴图数据；

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

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

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

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

所述第二步具体包括：

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

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

T3解析动画，在模型加载完成后，对动画数据进行解析，生成Animation Clip(动画卡片)数组，并缓存；

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

本发明一种基于WebGL的三维模型显示方法,其有益效果有：

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

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

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

附图说明

图1为本发明一种基于WebGL的三维模型显示方法的示意图。

具体实施方式

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

参见图1，图1为本发明的流程框图，基于WebGL的三维模型显示方法包括以下步骤：将模型文件进行标准化处理获取.fbx格式文件，将模型文件转换为自定义的json格式文件，采用WebGL将三维模型通过浏览器以页面的形式展示，利用JavaScript程序来控制三维模型的显示效果，其中所述json格式文件至少包括json格式模型文件、json格式贴图文件，.fbx文件转换为自定义的json格式文件的具体过程如下：

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

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

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

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

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

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

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

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

采用脚本语言JavaScript的方式来控制三维模型的显示效果的具体过程如下：

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

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

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

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

利用本发明基于WebGL的三维模型显示方法加载及展示一摩托车三维模型，本实施例是基于WebGL的框架Three.js加载摩托车三维模型的motou.fbx文件到三维空间进行展示并读取摩托车模型所有材质，从原材质列表或者直接点击模型各部件选中要修改的材质，再将材质替换成标准材质库中的标准材质后进行材质编辑，所述材质编辑包括修改材质参数、修改颜色、替换贴图、旋转贴图、设置贴图平铺次数，材质编辑完提交到后台，所述模型编辑方法利用HTML5技术布局界面交互UI；

摩托车三维模型显示方法具体步骤如下：

1)、加载模型，读取材质，使用基于WebGL的框架Three.js加载模型fbx格式到三维空间进行展示并读取模型所有材质，利用HTML5技术布局界面交互UI，模型在三维空间可进行旋转、缩放、按材质选择及按网格选择；

2)、选取材质，从材质列表中或直接从三维空间点击模型相应部位选取某一材质，选中状态下所有使用该材质的网格对象会进行边缘高亮显示，读取材质属性展示到相应HTML5元素上；

3)、原材质替换成标准材质，本发明提供一标准材质库，所述标准材质库基于Three.js框架制作，所以要想编辑出好看的材质并且多端展示时保持效果一致，就需要先将原材质替换成标准材质库中预设的标准材质。

4)、材质属性修改，本发明HTML元素与三维空间可以实时联动，HTML元素上进行属性修改会实时体现到三维世界，如改变数值、点击列表元素、替换贴图，而三维世界中的操作也会改变HTML元素的值，如切换材质；

5)、贴图替换及修改，贴图可从本发明提供的标准贴图库中选择或自行上传替换，贴图的旋转和平铺次数可进行修改；

6)、模型尺寸修改，可读取模型真实尺寸，并可通过拖拽长、宽、高任意一项进行等比缩放；

7)、赋予新材质，如果是多个网格共用一个材质，可为这些网格分别赋予新的材质以便做更细致的材质编辑。

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

Claims (6)

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