Cesium动态修改模型的颜色

标签: Cesium 分类: Gis 创建时间:2020-10-12 05:18:11 更新时间:2025-01-17 10:39:22

这篇文章源自一个需求:假设有一段管线,里面会有液体流动,根据温度的不同,通过改变管道的颜色,来显示此时管道内流动的液体的温度。这就需要动态的修改模型的颜色了。解决这个问题,我觉得需要首先解决模型的加载问题,刚开始,我选择了使用3dtiles格式进行加载,虽然成功的讲管线加载到了页面中,但是很难改变管道的颜色,3dtiles类似于静态的切片,需要使用额外的技术才能改变实体的颜色,比如单体化。后来,我想到了使用obj格式,但是好像Cesium不支持obj格式的加载。

参考文章:
1.cesium 添加model及其增删改 (这篇文章通过加载gltf模型,实现了点击屏幕,切换模型的位置的功能)
2.cesium点击获取entity的属性 (scene.pick接口实现entity的拾取)
3.cesium 3dtiles模型单体化点击高亮效果 (这篇文章也是在使用3dtiles的基础上,实现了点击某一个模型进行高亮的功能)
4.cesium 3DTILES 不同模型显示不同颜色 (这篇文章中提到了一个Cesium3DTileStyle,我觉得可以借助一下,实现有条件的渲染)
5.CesiumLab V1.4 分类3dtiles生成(倾斜单体化、楼层房间交互) (这篇文章使用了CesiumLab工具,实现了倾斜单体化的过程)

1.模型转换

要给模型赋予相应的颜色,首先就是要将模型加载到场景中。

参考文章:
1.Cesium.js 加载3D模型 (使用OpenCollada,讲obj转成dae,然后再转成gltf,和参考文章8有些类似)
2.Cesium官方教程7–三维模型 (这篇文章是系列教程中的一篇,只是加载了官方提供的glTF格式的模型,不过还是提供了一个在线的转换工具dae到gltf,没有具体的测试)
3.cesium模型加载-转换为gltf 加载fbx格式模型 (这篇文章主要是讲了使用多个工具,从fbx格式→dae格式→gltf格式→cesium加载gltf格式模型的过程)
4.cesium導入3D模型(obj轉gltf) (提供了一个工具obj2gltf,将obj转为gltf)
5.Cesium 学习(二)所支持的模型数据类型,以及转换 (粗略的概述了Cesium支持的目前所知的有glTF、glb、bgltf模型,以及相关方法的转换)
6.C2——cesium加载obj等常见BIM及问题 (主要提供了一个表,就是对比obj格式和gltf格式的大小以及再浏览器中加载的时间长短)

2.模型的加载

参考文章:
1.cesium加载3Dtiles数据 (如何加载3Dtiles模型)

3.3Dtiles模型颜色

使用了Cesium3DTileStyle,果真可以修改模型的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 加载3d管道模型
var url="./resource/pipeline/tileset.json"
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url, //数据路径
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
}));
tileset.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);

// 改变模型的颜色
var transparentStyle = new Cesium.Cesium3DTileStyle({
color : "color('red', 0.3)",
show : true
});
tileset.style=transparentStyle;
}).otherwise(function(error) {
console.log(error);
});

还可以使用条件表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// floor为处理前的高度字段(原来是大写,但是要用小写,不知道什么原因)
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['${floor} >= 8', 'rgba(45, 0, 75, 0.5)'],
['${floor} >= 7', 'rgb(102, 71, 151)'],
['${floor} >= 6', 'rgb(170, 162, 204)'],
['${floor} >= 5', 'rgb(224, 226, 238)'],
['${floor} >= 4', 'rgb(252, 230, 200)'],
['${floor} >= 3', 'rgb(248, 176, 87)'],
['${floor} >= 2', 'rgb(198, 106, 11)'],
['true', 'rgb(127, 59, 8)']
]
}
});

基于以上的测试,那么就开始直接通过该命tileset.style来改变模型的整体效果了。

参考文章:
1.Cesium入门10 - 3D Tiles (这篇文章使用了Cesium3DTileStyle进行了样式的定制,并且举了多个例子)
2.Cesium 学习记录(6)改变几何外观的颜色(材质) (这篇文章包括了修改点的颜色和修改线的颜色)
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。