当前位置:网站首页>Cesium加载三维模型数据

Cesium加载三维模型数据

2022-08-09 10:56:00 csdn_zhangchunfeng

Cesium加载三维模型步骤

一.环境配置

1.1 下载Cesium js

   https://github.com/AnalyticalGraphicsInc/cesium/releaseshttps://cesiumjs.org/downloads/,下载最新版本的Cesium。

 

1.2 下载Nodejs

   可在官网上https://nodejs.org/en/下载Nodejs安装包,安装完之后,执行相对应的命令检查是否安装成功。

 

 

   设置Nodejs的环境变量及其他配置,具体操作如下所示:


 

 


1.3 运行npm install

   打开cmd命令行进入到cesium的安装目录,执行npm install,这个过程因为要连接到国外的网站,过程会非常慢,如果安装失败可以去网上找找原因,该命令执行成功后会在cesium根目录下创建node_modules目录,具体效果如下:

 

 

注意事项:

1)错误一:代理

 

 

 

1.4 安装gulp依赖项

 

 

 

二.编译Cesium js

   Cesium目录下cmd执行gulp default命令,操作及结果如下所示:

 

 

注意事项:

1)错误一:gulp不是内部命令

 

 

 

三.准备三维数据

    Cesium中目前支持gltf和bgltf两种格式,gltf和bgltf都可以通过dae格式的三维模型转换而来,这里使用的模型是经过3ds Max导出的dae格式数据,而3ds Max本身不支持导出dae格式数据,要达到预期结果,需添加OpenCollada插件;再通过使用colladaTogltf.exe转换工具转成gltf格式或bgltf格式。

3.1 添加OpenCollada插件

下载mds max插件OpenCOLLADA Tools,下载地址:https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools。

 

 

   重新启动3ds Max软件,打开相应max文件,再导出DAE格式的模型,具体操作如下:

 

 

 

3.2 数据转换工具

   下载collada2gltf 工具,下载地址:

https://github.com/KhronosGroup/glTF/releases,此工具用来将dae格式文件转换为gltf格式,下载完解压后的目录如下图:

 

 

3.2.1 daeTogltf

    使用colladaTogltf.exe把dae数据转为gltf格式数据。通过cmd进入到colladaTogltf.exe所在的文件夹,使用如下命令即可:

collada2gltf.exe -f daePath -e或者collada2gltf.exe–f daePath -o gltfPath。

这里的daePath为dae文件的全路径,比如C:\Test.dae,可以把三者放同一个文件下,那样的话这里的daePath就只要提供dae文件的名字即可,比如test.dae,gltf。同样只要一个文件名即可。

另外这里使用-e命令选项的意思是把转换后的gltf只输出为一个文件,其把几何和纹理数据一起打包在一起;-o命令则一般输出3个格式.bin、.gltf、.glsl。(Cesium在1.16后提供了纹理和几何异步加载的机制,这样就建议不要用-e了)转换成功时的命令行会输出转换过程中转换的一些信息,包含了几何和动画信息,并且转换后的gltf会在exe或者指定的文件夹下。如下图:

 

3.2.2 daeTobgltf

    对于转换为bgltf也是同样的道理。把collada2gltf.exe和colladaToBgltfConverter.jar放到同一个文件夹下,cmd进到该文件夹,通过如下命令格式可以进行转换。

java -jar colladaToBglTFConverter.jar -c collada2gltf.exe -i inputPath -o outputPath

这里inputPath只需指明dae格式所在文件夹,outputPath则是输出格式的文件夹。转换后的输出为:转换后的数据在指定输出文件夹下。

 

四.加载三维模型

4.1 加载模型方法

 

4.2 加载模型效果

 

 

原网站

版权声明
本文为[csdn_zhangchunfeng]所创,转载请带上原文链接,感谢
https://blog.csdn.net/csdn_zhangchunfeng/article/details/79030926