Super Map超图IServer加载gltf三维模型

加载gltf三维模型

在使用场景中，SuperMap iClient3D for WebGL(以下简称：WebGL客户端)需要加载一些带有动画的三维模型来展示特殊场景效果，而三维建模软件众多而模型格式纷纭，格式上的不统一给WebGL客户端载入模型带来麻烦；另一方面这些模型通常还包含了场景、灯光、摄像机等冗杂信息，这将大大降低模型载入效率和显示性能。
glTF是由khronos组织定义的一种文本交换格式，它可减少3D模型中与渲染无关的冗余内容，并且充分支持OpenGL，WebGL，OpenGL ES图形加速标准，glTF格式具有利于网络传输的特性，而广泛适用于在互联网和移动设备上展现三维模型。
操作流程
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。

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

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文件，它将包含模型的几何形状和纹理信息

(4) 按下回车键即可进行格式转换。
操作结果
转换完成后gltf模型与DAE模型存放在同一文件夹下，如下图所示。

值得注意的是，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
操作结果
打开网页后，相机飞至地形数据所在位置，显示效果如下图：

标签：Map,DAE,模型,存放,格式,IServer,WebGL,gltf
来源： https://blog.csdn.net/qq_42522024/article/details/120194937