文档章节

cesiumjs开发实践(七) 3D模型

kamijawa
 kamijawa
发布于 2014/07/14 17:34
字数 472
阅读 2.2W
收藏 13

     cesium中支持载入3D模型,不过只支持gltf格式。gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于互联网或移动设备上展现3d内容,充分支持opengl,webgl,opengles图形加速标准。

    gltf目前可以由collada格式转换而来,官网上也提供了一个转换工具(https://www.khronos.org/gltf)。这个工具比较坑爹,只能和collada文件放在同一个目录才工作,转换后的结果文件也必须在同一目录,就是说不能指定输入和输出路径,当初坑了我好久才发现。

    一个collada文件转换后结果有4个文件,一个.bin,一个.json,两个.glsl。.json文件是描述性的文件,.bin是实际的数据,两个glsl文件是顶点着色语言文件。把这些文件所在目录部署到web服务器上。在client端添加

var ellipsoid = viewer.scene.globe.ellipsoid;
var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(lng, lat, height));
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);
var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotate - 90));
var mat3 = Cesium.Matrix3.fromQuaternion(quat);
var mat4 = Cesium.Matrix4.fromRotationTranslation(mat3, Cesium.Cartesian3.ZERO);
var m = Cesium.Matrix4.multiplyTransformation(modelMatrix, mat4);//获得最终变换矩阵,参考笔者前面写的《坐标变换》篇	
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
		url : 'http://localhost:88/gltf/tower.json',//转换后4个文件中的json文件
		modelMatrix : m, //添加模型的变换矩阵,才能显示在正确位置,否则打死也找不到,被放到地球的某个角落里
		scale:1.0 //缩放倍数
}));
//模型加载后,如果有动画就播放	
model.readyToRender.addEventListener(function(model) {
		// Play and loop all animations at half-spead
	model.activeAnimations.addAll({
			speedup : 0.5,
			loop : Cesium.ModelAnimationLoop.REPEAT
	});

});

加载模型后的效果

模型显示是否顺滑与模型三角面数,机器配置,浏览器版本密切相关。浏览器推荐使用Chrome30.0以上。

本篇到此结束



© 著作权归作者所有

kamijawa
粉丝 67
博文 7
码字总数 4833
作品 0
昆明
私信 提问
加载中

评论(5)

fd_liwj
fd_liwj
楼主好,谢谢分享的文章,请问文中的杆塔模式是否可以分享一份,可以的话麻烦发我一份吧,邮箱lwj476923900@qq.com 谢谢!
1622854744
1622854744
您好!,能不能把您工程中用到的模型及数据发我一份,我也想研究一下,谢谢,我的邮箱1622854744@qq.com
c
cmsj
你好,嫩不能把你这个工程用到的资源发给我呢,我的邮箱是123141432@qq.com谢谢了
丹凤
博主有没有做过手机端的Cesium的3d模型的展示
hizcw
hizcw
我现在也在用cesium进行开发,遇到好多问题,想请教下高手,在吗?
cesiumjs开发实践(六) CZML

CZML是cesium中很重要的一个概念,也是一个亮点,CZML使得cesium很酷很炫地展示动态数据成为可能。 CZML是一种JSON格式的字符串,用于描述与时间有关的动画场景,CZML包含点、线、地标、模型...

kamijawa
2014/07/14
1.2W
0
cesiumjs开发实践(五) 坐标变换

cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者...

kamijawa
2014/07/14
1.2W
3
Cesium中级教程10 - CesiumJS and webpack

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets,并使用简单...

Cesium中文网
2019/06/02
160
0
Cesium中级教程5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷和...

Cesium中文网
2019/05/22
271
0
WebGL 可视化引擎 - CesiumJS

Cesium 是通过 Web 浏览器创建 3D 地球和 2D 地图的 JavaScript 库,无需任何插件。Cesium 使用 WebGL 来进行硬件加速图形化;跨平台、跨浏览器;并且针对动态数据进行可视化。 Cesium 基于 ...

匿名
2015/03/25
1.8W
2

没有更多内容

加载失败,请刷新页面

加载更多

被关系数据库建表和升级折磨?因为你没用大道至简的Flyway

前言 六年前Flyway已经是我TDD开发、持续集成工具栈中的重要一环了,作为早期用户,我早就应该为它做个”广告“,可惜对创业者来说时间太宝贵了,现在趁着疫情才有机会在家里总结点东西。虽然...

chentao106
22分钟前
64
0
解决ClientDataSet连接脱离框架导致某些字段无法在客户端修改值的问题

{ function: 解决ClientDataSet连接脱离框架导致某些字段无法在客户端修改值的问题 description: 将一个复制Data的clientdataset做成可写。因为直接赋值cdsData.data=cdsTemp.data会连着dat...

乞丐88
24分钟前
27
0
Java日期时间API系列25-----Jdk8中java.time包中的新的日期时间API类,使用MonthDay计算十二星座。

  通过Java日期时间API系列24-----Jdk8中java.time包中的新的日期时间API类,MonthDay类源码和应用,对比相同月日时间。对MonthDay简单做了说明和应用。十二星座是根据公历生日类计算属于哪...

侠客张三
30分钟前
40
0
iOS在应用初始化阶段可能会执行的一些动作

排名不分先后 检查应用是否为首次启动。 检查用户是否已经登陆。 如果用户已经登录,尽可能地载入之前的状态。 连接服务器以拉取最新的变更。 检查应用是否由某个深层链接唤起。如果是,还需...

mouos
32分钟前
46
0
我可以从Django中的模板访问settings.py中的常量吗?

我希望通过模板访问settings.py中的一些内容,但是我不知道该怎么做。 我已经试过了 {{CONSTANT_NAME}} 但这似乎不起作用。 这可能吗? #1楼 如果使用基于类的视图: ## in settings.py#...

技术盛宴
35分钟前
38
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部