http://blog.csdn.net/tangyajun_168/article/details/50936698

最近项目中用到室外三维模型与室内三维地图交互,室外三维模型的加载我们采用了cesium js来实现,在使用的过程中遇到了许多的问题,闲暇之余将其实现及遇到的问题记录下来,以备将来再用到时少走弯路。
一、开发环境准备
1、下载cesium js
cesium js 下载地址 https://github.com/AnalyticalGraphicsInc/cesium/releases

下载完成解压后的目录如下图

2.打开cmd命令行进入到cesium的安装目录,执行npm install(需要安装nodejs及npm),该命令执行完会在cesium根目录下创建node_modules目录,如下图


安装gulp作为项目开发的依赖,如下图

gulp安装之后会在node_modules目录中创建执行gulp命令所需要的依赖包,如下图

3.下载mds max插件OpenCOLLADA Tools,下载地址
https://github.com/KhronosGroup/OpenCOLLADA/wiki/OpenCOLLADA-Tools(根据系统要求下载32位或64位)。
4.下载collada2gltf 工具,下载地址https://github.com/KhronosGroup/glTF/releases,此工具用来将dae格式文件转换为gltf格式,下载完解压后的目录如下图

二、编译cesiumjs
在cesium根目录执行gulp default命令,将会在cesiumjs安装的根目录创建一个Build文件夹,里面包含的是编译后生成的cesium.js文件及相关组件。


编译后的Build目录包含小部件、第三方依赖库及离线地图数据等

三、用cesium js库开发,加载三维模型
1.将Build目录中的所有文件及目录拷贝到项目中

2.将3ds max中的三维模型数据导出成dae格式,如图


导出的类型需要选择OpenCollada(*.dae),如果导出的模型存在透明贴图,导出时不要勾选相对路径,导出后会生成一个images目录,该目录中的图片是模型中所需要的贴图及纹理图。

3.将dae格式文件转换成gltf文件,打CMD命令行,进入到collada2gltf的根目录,执行collada2gltf.exe -f E:\xykjc\Model\zhulou.dae -e,
-f表示dae文件的完成路径,collada2gltf支持两种转换方式,-e及-o,-e转换后只生成一个文件(gltf文件),在模型比较大时我们可将模型与纹理贴图分开加载,这时可用-o命令进行转换,转换后会生成.gltf、.bin及.glsl三种格式的文件(注意:在max中导出模型时不能选择相对路径,如果选中了相对路径,-o转换的gltf模型文件加载出来会变成黑色)


4.将生成gltf文件及纹理贴图拷贝到项目中

5.导入cesium.js及widgets.css

//创建cesium Viewer
viewer = new Cesium.Viewer(‘cesiumContainer’,{
//是否创建动画小器件,左下角仪表
animation:false,
//是否显示图层选择器
baseLayerPicker:false,
//是否显示全屏按钮
fullscreenButton:false,
//是否显示geocoder小器件,右上角查询按钮
geocoder:false,
//是否显示Home按钮
homeButton:false,
//是否显示信息框
infoBox : false,
//是否显示3D/2D选择器
sceneModePicker:false,
//是否显示选取指示器组件
selectionIndicator : false ,
//是否显示时间轴
timeline:false,
//是否显示右上角的帮助按钮
navigationHelpButton:false,
//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
scene3DOnly : true,
navigationInstructionsInitiallyVisible:false,
showRenderLoopErrors:false,
//加载自定义地图瓦片需要指定一个自定义图片服务器 例如指定OpenStreetMapImagerProvider
//URL 为瓦片数据服务器地址
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
url : ‘//a.tile.openstreetmap.org/’
})
/* targetFrameRate:1,sceneMode:Cesium.SceneMode.SCENE2D,
imageryProvider:new Cesium.WebMapServiceImageryProvider(),
mapProjection : new Cesium.WebMercatorProjection() */
});

/**
*创建模型entity,加载gltf文件
*@id 模型ID
*@url 3d模型URL路径
*@height 高度
*@lon 模型所在经度
*@lat 模型所在纬度
**/
function createModel(id,url,height,lon,lat){
//删除视图上所有的实体
//viewer.entities.removeAll();
//实体的位置(经度、纬度、)
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(0.0);
var roll = 0.0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
id:id,
//coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE,
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
//minimumPixelSize : 100,
maximumScale : 20000
}
});
//viewer.trackedEntity = entity;
return entity;
}

viewer.entities.removeAll();
//地面
createModel(‘ground’,’ModelData/zhulou.gltf’,0,112.226923,32.138933);
在html的body标签中添加<div id="cesiumContainer"></div>
运行的效果图如下

参考资料
http://www.zhiwenli.com/wordpress/?p=294
https://blog.gmem.cc/cesium-study-note
http://blog.csdn.net/l491453302/article/details/46766909
http://cesiumjs.org/

cesium js学习一加载三维模型【转】的更多相关文章

  1. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  2. cesium初探之加载三维模型

    项目需要用到二三维地图切换,本来准备研究ArcGIS js for Web 3d,但考虑到版权的问题,决定试着用cesium来做,于是花了2天时间抱着试试看的心态把cesium从环境配置到加载三维模型 ...

  3. 【 js 模块加载 】深入学习模块化加载(node.js 模块源码)

    一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范.  1.AMD(Asy ...

  4. 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)

    文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...

  5. cesium 学习(五) 加载场景模型

    cesium 学习(五) 加载场景模型 一.前言 现在开始实际的看看效果,目前我所接触到基本上都是使用Cesium加载模型这个内容,以及在模型上进行操作.So,现在进行一些加载模型的学习,数据的话可以 ...

  6. c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互,加载kml文件,dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

    网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...

  7. js的动态加载、缓存、更新以及复用(二)

    上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js.requrieJS.sea.js.lab.js等.这个开阔了眼界,以前只知道sea.js,省去了自己搜索 ...

  8. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  9. 原生JS下拉加载插件分享。

    无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...

随机推荐

  1. 解惑spring嵌套事物

    工作中一直对spring中的事物管理都是最简单的配置 但是spring中的事物传播性配置 还有很多种,有时候经常疑惑service调用service的问题,今天的论坛上看到一篇写的非常详细的文字.记录 ...

  2. 【小白的CFD之旅】13 敲门实例【续3】

    接上文[小白的CFD之旅]12 敲门实例[续2] 4 Results4.1 计算监测图形4.2 Graphics4.2.1 壁面温度分布4.2.2 创建截面4.2.3 显示截面物理量4.2.4 Pat ...

  3. Spring jar下载地址:

    https://repo.spring.io/release/org/springframework/spring/

  4. AIX 第3章 指令记录

    [ssdb01.shz.hn|oracle|/home/oracle]$oslevel -rq  --查看系统已安装的维护级别 Known Recommended Maintenance Levels ...

  5. PHP Fatal error: Cannot pass parameter 2 by reference

    PHP Fatal error:  Cannot pass parameter 2 by reference in 这个错误的意思是:不能按引用传递第2个参数 我的理解是: 方法的第2个参数 需要传递 ...

  6. [python] 字符串与列表、字典的转换

    1.字符串->字典:eval(str) 2.字符串->列表:list(str)

  7. The 2015 China Collegiate Programming Contest Game Rooms

    Game Rooms Time Limit: 4000/4000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  8. [置顶] 最优间隔分类器、原始/对偶问题、SVM的对偶问题——斯坦福ML公开课笔记7

    转载请注明:http://blog.csdn.net/xinzhangyanxiang/article/details/9774135 本篇笔记针对ML公开课的第七个视频,主要内容包括最优间隔分类器( ...

  9. V-bind详细使用

    v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url">& ...

  10. 网页布局之grid

    学习网格布局时,你可能会在网络上看到很多文章,内容不同,属性不同,真是让人摸不着头脑,到底哪个才是正确的?看了本篇文章,我想你会豁然开朗.比如,一会儿用grid-rows,一会儿用grid-defin ...