Cesium.js 加载3D模型

一、Cesuimjs介绍

Cesiunjs是一套GIS行业中进行地图渲染的js库，该库使用的WebGL进行地图渲染。并且结合HTML5进行相应，从而实现3D中渲染地图。本篇文章则介绍如何将后缀名为max的文件加载到Cesiumjs中去。

二、加载过程

因为cesium只支持GLTF格式的3D描述文件，而笔者拿到的.max文件。因此要实现从max文件转换到gltf文件过程，然后通过cesium相应的api加载3D模型。

1、安装3Ds Max 2014

这里版本不一定要使用2014版本，但是一定要使用2015版本以前的，因为在我们格式转换3D max需要一个第三章插件的支持。该插件最高版本支持3Ds max 2015版本。安装和破解教程不在这里赘述：http://jingyan.baidu.com/article/3aed632e602381701080911d.html

2、安装第三方格式插件-----OpenCollada

在max文件转换到gltf文件过程中，需要先将max文件转成 DAE 文件，然后通过cesium项目中提供的转换工具将DAE 文件转换成 GLTF文件。在3Ds Max 2014版本中，带有AutoDesk公司自己研发的Collada，但是在转换过程中会出现以下报错：

[WARNING] Reading or writing file. - While reading or writing a file the following notifications have been raised.
Warning: Null not supported by COLLADA. Node *** will lose its geometric information. The node transforms will be saved.

所以我们需要安装OpenCollada插件进行格式转换，插件的下载地址为：https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools

在下载时选择Download [2014] (Morph not yet supported) 该项，则可以下载使用与3Ds Max版本的OpenCollada插件了。等下载完成后，该插件为：COLLADAMAX.dle 文件，然后将该文件拷贝到3Ds Max 2014安装目录中的 stdplugs 文件夹中，然后启动或者重启3Ds Max软件，打开软件后：自定义->插件管理器，然后打开管理器：

然后在插件列表中右击，加载新插件，并在文件选择器中选择放入 stdplugs 文件中的 COLLADAMAX.dle文件。

然后就能在插件列表中看到COLLADAMAX.cle插件已经被加载成功了：

3、进行3D文件的格式转换

（1）使用3Ds Max 2014打开文件，并将 max 文件转换成OBJ 格式的3D模型，这是因为 dae文件无法支持tga的材质。因此需要先将3D模型转换为 OBJ 文件的3D模型。

点击3D Max 左上角图标后，点击导出（export），然后制定导出路径与文件名，并将文件类型选择为 OBJ

进行转换格式的材质的设置

然后点击导出，如果出现缺少贴图，则通过将max文件目录目录添加到搜索路径中即可。完成后就能看到在制定目录中的Obj文件等：

（2）将Obj文件转换成 DAE文件

双击Obj文件后，选择 3Ds Max 2014进行打开。在打开后选择导出（export）功能：

然后在导出时需要修改两处：

A、选择OpenCollada的DAE文件，而不是AutoDesk Collada的DAE文件

B、选择使用相对路径

然后就能完成对Obj对象像DAE文件的转换

4、DAE 文件转换到 GLTF文件

（1）下载Cesium提供的转换工具：ColladaToGltf.exe,下载地址为：https://github.com/KhronosGroup/glTF/releases

（2）进行DAE 文件的装换

在Windows下打开命令行模式，进入到该工具的文件夹中，然后通过命令进行文件转换：

collada2gltf.exe -f {dae文件的绝对路径} -e

-f ： string，指定dae文件的绝对路径

-e：将所有的文件全部打包成一个gltf文件，如果没有指定的话则会生成 bin gltf glsf等多种文件。

该命令执行完成后，就会发现dae所在文件中出现了一个同名的 GLTF文件。

5、使用Cesium加载3D模型

将转换的dae文件和gltf文件全部拷到相应的文件夹中.然后通过cesium提供的例子进行测试：

var viewer = new Cesium.Viewer('cesiumContainer');
var scene=viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({url : '../../SampleData/models/GZF/gzf_d_1/gzf_d_1.gltf',modelMatrix : modelMatrix,scale : 200.0
}));

出现的结果为：

三、总结

在经过两天的折腾，终于将整套流程完成了下来，如果上述有什么细节没有描述清楚的，请参考下面给出的博客：

http://blog.csdn.net/l491453302/article/details/46766909

Cesium.js 加载3D模型相关推荐

使用Cesium.js加载3D模型
最近项目中用到室外三维模型与室内三维地图交互,室外三维模型的加载我们采用了cesium js来实现,在使用的过程中遇到了许多的问题,闲暇之余将其实现及遇到的问题记录下来,以备将来再用到时少走弯路. 一 ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
three.js加载3d模型_可加载5亿多边形，InsiteVR推Quest端BIM协作应用《Resolve》
6月10日消息,VR软件解决方案商InsiteVR发布一款为AEC行业(建筑.工程和施工)打造的VR远程协作和3D模型预览应用:Resolve.据悉,Resolve支持Oculus Quest,特点是 ...
three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）
Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思. 结构 .glb.gltf文件最好放在服务器上 ...
threejs加载3D模型例子
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
如何加载3D模型（odj文件和mtl文件）
模型的加载因为,在最近的项目模块中需要加载部分"模型".在加载模型在方面我从来的没有接触过,是通过同事告诉,慢慢摸索才完成的,其中是我遇到的问题和总结的一些的方法. 使用VUE加 ...
three.js加载OBJ模型
three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
threejs加载3D模型
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
PHP加载3D模型【WebGL】
这是另一篇关于如何使用 PHP加载 3D 模型的文章. 在这里,我使用 Laravel 作为后端及其存储. 我在前端使用 Three.Js 库来渲染和显示 3D 模型. 我将向您展示如何上传 3D 模 ...

Cesium.js 加载3D模型

Cesium.js 加载3D模型相关推荐

最新文章

热门文章