Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加

还记得我们在实体添加的时候添加过一个3D模型么,具体是这样的

var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : {
uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf'
}
});
viewer.trackedEntity = entity;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

我们将3D模型直接以实体的形式添加进去,效果很不错,这次我们换种形式

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 : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
modelMatrix : modelMatrix,
minimumPixelSize : 512,
maximumScale : 200000
}));
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

你会发现这个模型却没有自带动画效果,让我们来给他加上动画

Cesium.when(model.readyPromise).then(function(model) {
model.activeAnimations.addAll({
//永久重复
loop : Cesium.ModelAnimationLoop.REPEAT
});
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这时候就有动画效果了,这个动画效果我们也是可以控制的,比如让它慢一点或者回放一遍

model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT,
//这个半速是相对于Cesium的clock来说的
speedup : 0.5,
reverse : true
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

那么这两种方法有什么区别呢?

追溯一下源码可以发现,其实用实体(entities)创建的3D模型最终通过GeometryInstance转化成了primitives,也就是说两者根本上是一样的,不过用实体方式创建会更简单一点。

顺带稍微查了下,用实体方式创建因为在用GeometryInstance会进行一个分类处理,能够充分利用GPU性能,所以在性能上还会更优化一些

我们还可以精准的选择3D模型上的一个个小的部件

//获得当前鼠标在模型上触碰位置的名字
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
function (movement) {
//当鼠标移动时获取移动的末位置
var pick = scene.pick(movement.endPosition);
//简单来说就是这个点上有东西,那就打log
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name);
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

可以看到控制台把每个部件的名字都打印出来了

Cesium还为我们提供了一个检查器,我们可以通过这个检查器来查看我们模型的边界、轴坐标等,当前这个检查器的功能不止在3D模型上,还有拾取当前点的经纬度等其他功能

viewer.extend(Cesium.viewerCesiumInspectorMixin);
  • 1
  • 1

只需要一行就可以开启

点开primitives,pick我们这个模型就可以了

我们还可以给模型改变一下属性

var viewer = new Cesium.Viewer('cesiumContainer')
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : {
uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
//模型颜色,透明度
color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)),
//轮廓线
silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)),
//模型样式['Highlight', 'Replace', 'Mix']
colorBlendMode : Cesium.ColorBlendMode.MIX,
//colorBlendAmount需要选择mix后将colorBlendAmountEnabled设置为true才能使用
colorBlendAmountEnabled : true,
colorBlendAmount : parseFloat(0.8)
}
});
viewer.trackedEntity = entity;
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

Cesium学习笔记(五):3D 模型 (http://blog.csdn.net/umgsoil/article/details/74572877)的更多相关文章

  1. Android 学习路线图(转载自https://blog.csdn.net/lixuce1234/article/details/77947405)

    程序设计 一.java (a)基本语法(如继承.异常.引用.泛型等) Java核心技术 卷I(适合入门) 进阶 Effective Java中文版(如何写好的Java代码) Java解惑 (介绍烂Ja ...

  2. scala学习(idea编译过程https://blog.csdn.net/guiying712/article/details/68947747)

    scala官网 https://www.scala-lang.org/ 菜鸟教程学习 http://www.runoob.com/scala/scala-basic-syntax.html w3sch ...

  3. 学习mongoDB的一些感受(转自:http://blog.csdn.net/liusong0605/article/details/11581019)

    曾经使用过mongoDB来保存文件,最一开始,只是想总结一下在开发中如何实现文件与mongoDB之间的交互.在此之前,并没有系统的了解过mongoDB,虽然知道我们用它来存储文件这些非结构化数据,但是 ...

  4. K8S 使用NFS 创建PV和PVC的例子 学习From https://blog.csdn.net/xts_huangxin/article/details/51494472

    1. 获取资料 网址: https://blog.csdn.net/xts_huangxin/article/details/51494472  感谢原作者 这里面 按照自己的机器情况进行了学习模仿 ...

  5. springboot项目--传入参数校验-----SpringBoot开发详解(五)--Controller接收参数以及参数校验----https://blog.csdn.net/qq_31001665/article/details/71075743

    https://blog.csdn.net/qq_31001665/article/details/71075743 springboot项目--传入参数校验-----SpringBoot开发详解(五 ...

  6. Mui本地打包笔记(一)使用AndroidStudio运行项目 转载 https://blog.csdn.net/baidu_32377671/article/details/79632411

    转载 https://blog.csdn.net/baidu_32377671/article/details/79632411 使用AndroidStudio运行HBuilder本地打包的Mui项目 ...

  7. Bellman-ford算法的学习http://blog.csdn.net/niushuai666/article/details/6791765

    http://blog.csdn.net/niushuai666/article/details/6791765

  8. 炸天的3D引擎OpenCASCADE的用法及案例(https://blog.csdn.net/xipengbozai/article/details/117044032?spm=1001.2014.3001.5502)

    What CASCADE?Open CASCADE(简称OCC)平台是由法国Matra Datavision公司开发的CAD/CAE/CAM软件平台,可以说是世界上最重要的几何造型基础软件平台之一.开 ...

  9. golang语言并发与并行——goroutine和channel的详细理解(一) 转发自https://blog.csdn.net/skh2015java/article/details/60330785

    如果不是我对真正并行的线程的追求,就不会认识到Go有多么的迷人. Go语言从语言层面上就支持了并发,这与其他语言大不一样,不像以前我们要用Thread库 来新建线程,还要用线程安全的队列库来共享数据. ...

随机推荐

  1. C语言课设心得分享(一)

    今儿上完课设,老师果然讲的比较少,周四还不用去,看来还是学生自己折腾.我在做课设的过程中,攒了一些心得/体会,希望能和大家分享分享,也希望能一起探讨探讨.如果是我能回答的问题,我很乐意能够提供帮助. ...

  2. 昨天晚上也弄不清楚是自己密码被盗了还是由于ip冲突

    所以还是尽量要相信自己所见到的,今天上午是安卓课程,说实话,昨天晚上都是2:30睡的,现在硬是要把时间待这么晚才回去睡,是因为我想尽快入睡,昨天晚上就是眼睛都有点睁不开了,所以就睡得很快,但是早上也是 ...

  3. 解决Visual Studio 2017隐藏“高级保存选项”命令

    Visual Studio提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符.在Visual Studio 2017中,该命令没有默认显示在“文件”菜单中.用户需要手工设置,才能 ...

  4. IIS 反向代理到 Apache、Tomcat

    将请求的网址重写重定向到其它网址.当80端口被占用无法同时使用两个Web服务的解决方案,使得IIS和Apache Tomcat 共存 环境 WindowServer 2008 IIS7 Apache ...

  5. 51nod 1009 数字1的数量(数位dp模板)

    给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1.   数位dp的模板题   ...

  6. python 的序列化和反序列化

    什么是序列化?简单来说就是将数据存储到物理内存上的过程叫序列化. 什么是反序列化?将数据从物理内存存储到程序内存的过程叫做反序列化. 下面来看一下python中使用json进行序列化和反序列化的实例d ...

  7. (转)MTU&MSS

    MTU是Maximum Transmission Unit的缩写,意为最大传输单元,通俗的理解就是在网络上传送的最大数据包,单位是字节. 以太网对数据帧的长度都有一个限制,其最大值为1500,这个特性 ...

  8. LOJ1070(SummerTrainingDay05-B 矩阵快速幂)

    Algebraic Problem Given the value of a+b and ab you will have to find the value of an+bn. a and bnot ...

  9. Struts2常见配置(草稿)

    Struts2框架配置文件加载的顺序(了解加载配置文件的顺序,重点掌握struts.xml配置文件) 1.Struts2框架的核心是StrutsPrepareAndExecuteFilter过滤器,该 ...

  10. python源码安装

    # mkdir /apps/Python- 解压源码包,进入源码包 [root@LB_81 Python-]# ls aclocal.m4 configure.ac install-sh Makefi ...