Cesium中目前支持gltf和bgltf两种格式。“gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于互联网或移动设备上展现3d内容,充分支持opengl,webgl,opengles图形加速标准”[1];bgltfg则是二进制格式的gltf扩展,cesium从1.10后开始支持该格式,其能减少模型数据的大小有利于网络传输,并且提高10%-30%的模型加载速度。
目前gltf和bgltf都可以通过dae格式的三维模型转换而来。其中gltf的转换工具可以在https://github.com/KhronosGroup/glTF/wiki/Converter-builds获取----colladaTogltf.exe,其能完成.dae到.gltf三维模型格式的转换。而dae转换到bgltf的工具可以在
https://github.com/virtualcitySYSTEMS/colladaToBglTFConverter中获取-- colladaToBgltfConverter.jar,该工具是首先将dae通过colladaTogltf.exe转换为gltf格式,然后在把gltf转换为bgltf,所以要使用该工具同时需要下载colladaTogltf.exe工具。
一般的模型格式,比如obj、3ds、fbx都可以先通过3dmax或者其他的建模工具(blender等)先转换为dae格式后再使用,但是在转换处理时要注意:
1. Gltf的纹理贴图的格式不能是tga,可以在3dmax转换为dae格式时同时转换纹理格式为png、bmp或者 jpg格式。我在处理时把max数据转为了obj,在导出为obj时有如下设置,即可完成纹理格式的转换(我转为了png)
2. 注意转换后的格式模型的几何数据中引用的纹理路径。尽量不要出现绝对路径。其实这个问题在格式转换时几乎不会产生,比如我这里使用了obj的纹理路径在./maps文件夹下。在以后的模型拷贝或者移动的同时把纹理文件夹一起拷贝就不会出问题。
使用colladaTogltf.exe把dae数据转为gltf格式。通过cmd进入到colladaTogltf.exe所在的文件夹,使用如下命令即可:
collada2gltf.exe–f daePath -e或者collada2gltf.exe–f daePath -o gltfPath
这里的daePath为dae文件的全路径,比如C:\Test.dae,有博客说不把dae、gltf、exe文件放一个文件夹下会报错,但是可能现在的版本已经解决好了这个bug,所以你也可以把三者放同一个文件下,那样的话这里的daePath就只要提供dae文件的名字即可,比如test.dae,gltf。同样只要一个文件名即可。
另外这里使用-e命令选项的意思是把转换后的gltf只输出为一个文件,其把几何和纹理数据一起打包在一起;-o命令则一般输出3个格式.bin、.gltf、.glsl。(Cesium在1.16后提供了纹理和几何异步加载的机制,这样就建议不要用-e了)
转换成功时的命令行会输出转换过程中转换的一些信息,包含了几何和动画信息,并且转换后的gltf会在exe或者指定的文件夹下。如下图。
对于转换为bgltf也是同样的道理。把collada2gltf.exe和colladaToBgltfConverter.jar放到同一个文件夹下,cmd进到该文件夹,通过如下命令格式可以进行转换。
java -jar colladaToBglTFConverter.jar -ccollada2gltf.exe -i inputPath -o outputPath
这里inputPath只需指明dae格式所在文件夹,outputPath则是输出格式的文件夹。转换后的输出为:
转换后的数据在指定输出文件夹下。
对于数据的加载使用,首先把转换后的数据(如果不是-e命令生成的单独数据,请把所有转换出来的文件和纹理文件一起)放到应用需要的布置文件夹,本文中将文件放在了Apps\ModelData文件夹下了。使用的加载代码为:
var viewer = new Cesium.Viewer('cesiumContainer'); var scene=viewer.scene; var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 6.0)); var model = scene.primitives.add(Cesium.Model.fromGltf({ url : 'ModelData/test.gltf',//如果为bgltf则为.bgltf modelMatrix : modelMatrix, scale : 3.0 })); viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 6.0) });
测试用Obj数据:
Cesium中加载的效果如下: