加载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”的文件夹,此文件夹存放着模型的纹理图片。
- 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
操作结果
打开网页后,相机飞至地形数据所在位置,显示效果如下图: