加载gltf三维模型操作手册

概述

在使用场景中，SuperMap iClient3D for WebGL(以下简称：WebGL客户端)需要加载一些带有动画的三维模型来展示特殊场景效果，而三维建模软件众多而模型格式纷纭，格式上的不统一给WebGL客户端载入模型带来麻烦；另一方面这些模型通常还包含了场景、灯光、摄像机等冗杂信息，这将大大降低模型载入效率和显示性能。

glTF是由khronos组织定义的一种文本交换格式，它可减少3D模型中与渲染无关的冗余内容，并且充分支持OpenGL，WebGL，OpenGL ES图形加速标准，glTF格式具有利于网络传输的特性，而广泛适用于在互联网和移动设备上展现三维模型。

当我们拿到一个由三维建模软件制成的三维模型时，通过以下操作可以实现在WebGL客户端导入三维模型，其过程主要有三步：

1. 1. 导出DAE模型
   2. DAE模型转GLTF
   3. 客户端加载模型数据

操作流程

下面以导入一个带有动画的塔吊模型（*.max格式）为示例作详细操作演示。

1.导出DAE模型

使用说明

此步骤需要使用3ds MAX软件将*.max的模型导出为DAE格式，DAE文件格式是3D交互文件格式，一般用于多个图形程序之间交换数据。

3ds MAX在导出时所提供的DAE格式选项为“Autodesk Collada (*.DAE)“，使用该格式模型贴图将不能正常导出，我们需要使用”OpenCOLLADA (*.DAE)”格式导出，因此请下载适应于3ds MAX的DAE输出插件。

本示例所使用的插件为：“COLLADAMax.dle“。

操作步骤

(1).安装第三方插件：下载插件后，将插件文件存放于3ds MAX安装目录下的plugins文件夹，本示例地址为：“C:\Program Files\Autodesk\3ds Max 2014\plugins”，如下图所示。

图：插件存放地址示意

(2).重启3ds MAX，打开原始三维模型，选择“导出|Export”，选择文件存放路径、输入文件名称，保存类型选择“OpenCOLLADA(*.DAE)“格式，如下图所示。

图： 选择保存类型

(3).点击“保存”，弹出“OpenCOLLADA Export”对话框，勾选”copy Images”，点击OK。

图： “OpenCOLLADA Export” 对话框

操作结果

导出DAE模型操作完成后，DAE格式的模型将存放于目标路径下，其中还包括了一个“images”的文件夹，此文件夹存放着模型的纹理图片。

图：导出DAE结果

2. DAE模型转GLTF

使用说明

导出DAE格式的模型后，在此操作中将使用转换工具（colladaTogltf.exe）将模型由DAE格式转为gltf格式。转换工具colladaTogltf.exe的获取地址： https://github.com/KhronosGroup/glTF/wiki/Converter-builds

此转换工具无需安装，请按照如下操作步骤进行。

操作步骤

(1)  Windows图标+R键打开 运行 对话框，输入 “cmd” 打开命令行窗口。

(2) 在命令行窗口中，进入到转换工具colladaTogltf.exe所在的文件夹，即输入：“cd %exePath%”。

(3) 输入命令行，命令格式为： collada2gltf.exe –f %daePath% -e

• • %daePath%为DAE模型文件的存放全路径，如本例的“ E:\models\models\diaota\diaota.DAE ”；
  • -e命令选项表示转换后输出一个gltf文件，它将包含模型的几何形状和纹理信息

图：输入命令行实现DAE到gltf的转换

(4) 按下回车键即可进行格式转换。

操作结果

转换完成后gltf模型与DAE模型存放在同一文件夹下，如下图所示。

图：转换后的gltf文件

值得注意的是，glTF格式模型的数据量大幅度降低，这将有利于提高网络客户端加载模型速度。

3. 客户端加载模型数据

使用说明

WebGL客户端可通过KML文件直接加载*.gltf格式的三维模型， 文件“KML_crane.html”为加载gltf三维模型的范例，它加载“crane.kml ”文件所记录的模型地址，则此步骤的主要操作则是修改KML文件中模型的存放地址。

操作步骤

(1) 将转换后的gltf模型数据复制存放到服务器资源文件夹下，地址：%SuperMap iServer_HOME%/webapps/%WebGL产品包% /examples/SampleData/models

(2) 进入WebGL产品包存放路径（%SuperMap iServer_HOME%/webapps），在“examples/SampleData”文件夹下，文本方式打开“crane.kml“文件，修改KML文件中模型的存放地址，如下图的内容。

图：修改模型存放地址

(3)以localhost方式打开“KML_crane.html “网页，浏览器输入地址即为： http://localhost:8090/%WebGL产品包%/examples/ KML_crane.htm

操作结果

打开网页后，相机飞至地形数据所在位置，显示效果如下图：

图：WebGL加载三维模型效果图